I want to automate the https://demoqa.com/ web page, at first, I want to select the Widgets card and click on this card, how I can select this if classes for each card is the same, only text is not the same.
So I wanted to use this get getWidgetButton() { return $('//h5[normalize-space(text()) = "Widgets"]');
But when I run this When('user press on Widgets button', ()=>{NavigationPage.getWidgetButton.click(); });
I receive error
- Widget Data Picker When user press on Widgets button [chrome 87.0.4280.88 windows #0-0] element click intercepted: Element ... is not clickable at point (709, 669). Other element would receive the click: ...
How I can select element what I want? Thanks!
First try to wait: by using element.waitForClickable() You don't need to scroll, WebdriverIO can click to the element if it's displayed on screen without performing scroll.
The selectors are really simplified in WebdriverIO. You can use css selector most of the time and it'll be enough. There're 2 ways to select your element:
if you want to select multiple elements with the same className use in WebdriverIO
use $$ and it'll return an array of elements. Then you can access to the element by index number. To select all widgets' headers you this code:get widgetHeaders () { return $$('.card h5') } Your Widget card is the 4th element, which means its index is 3. So, you can access it by like this and click widgetHeaders[3].click();. For more details: findElements in WebdriverIO
This is how you can find single element by using inner text: get getWidgetButton() { return $("h5='Widgets']"); Or find first h5 that contains 'widget' : get getWidgetButton() { return $("h5*='Widgets']");
For more details: findElement by inner text or by partial text
NOTE: As QA your priority should be finding defect. In the website that you've shared there's an issue with footer position. Footer came over the body and covering 60px of the body on the bottom. QA has to report this issue and it must be fixed by developer. I guess easiest way to fix it will be something like this:.body-height { min-height: 100%; padding-bottom: 70px; }