When attempting to interact with elements on a webpage using WebdriverIO, try utilizing the element.waitForClickable() method first. This can help ensure that the element is ready for interaction without requiring manual scrolling.
WebdriverIO offers simplified selectors, with the ability to primarily use CSS selectors. There are two main ways to select elements:
If you need to select multiple elements with the same className in WebdriverIO, you can use $$ to return an array of elements. By specifying the index number, you can access specific elements. For example, to select all headers within widgets:
get widgetHeaders () { return $$('.card h5') }
. If the Widget card is the 4th element (index 3), you can click on it using widgetHeaders[3].click();. More information available at: findElements in WebdriverIO
To find a single element based on inner text, you can use queries like
get getWidgetButton() { return $('h5=\'Widgets\']');
. Alternatively, to locate the first h5 containing 'widget': get getWidgetButton() { return $('h5*=\'Widgets\']');
. Further details can be found here: findElement by inner text or by partial text
It's important for QA professionals to prioritize finding defects. In the shared website, there seems to be an issue with the footer overlapping the body content by 60px. This should be reported and addressed by the developers. A potential fix could involve adjusting the body height and padding, such as:
.body-height { min-height: 100%; padding-bottom: 70px; }