1

I'm trying to write some tests using WDIO but stumble on the following issue. I don't really understand how to click() input type=radio. Here how it looks in DOM enter image description here

So I need to click the right one. I found it with $([id="all"]) and after waiting untill it's displayed use click() method and nothing happens. I'll apreciate any help

Павел Родин
  • 51
  • 9

1 Answers1

1

Without seeing the actual code you're using, the best we can do is assume that maybe the selector you're using needs to be adjusted. For instance, the $ method in WebdriverIO takes a selector as a string, so $('[id="all"]').click() should work, since the selector is inside single-quotes with the attribute value in double-quotes.

Also, it may be easier to simply use the hash symbol for id attributes:

$('#all').click();

A good way to debug things like this is to use the REPL. With the REPL, you can manually browse to the page with your radio buttons and then run arbitrary WebdriverIO commands from the terminal in order to test them out. Assuming they work, then the problem must be something with your waits.

Also, check to make sure the element with id="all" is unique. If there are multiple elements on the page with id="all" then that would be violating the HTML spec, since id attribute values must be unique on a single page.

To use the REPL, run the following command:

$ npx wdio repl chrome

This will open a browser, which you can control manually, as well as by running WebdriverIO commands from the terminal.

From what you've mentioned in the comments, you need to select an element that's inside a ShadowDOM. WebdriverIO has an API for this, which looks something like this:

$(selector).shadow$(selector);

The first selector will point to the element that contains the shadowRoot, and the second selector is for the input radio button element. For instance, let's say this is your HTML:

<some-custom-element>
  #shadow-root
    <header>
      <h1>
      <input type="radio" id="all">

To access, and click on, the radio button, we'd use the following WebdriverIO code:

$('some-custom-element').shadow$('input#all');

Your waitFors would work the same. If we're waiting for something in the shadow DOM to appear, such as the header, we'd do this:

$('some-custom-element').shadow$('header').waitForDisplayed();

Although the above examples use element selectors, we can also select the elements with id's, classes, or other attributes as well.

jamesmortensen
  • 33,636
  • 11
  • 99
  • 120
  • the problem is in my opinion that the element is not Displayed() in user interface. When I click it on the DOM nothing is highlighted on the interface. So now the error says "Node is either not clickable or not an HTMLElement". But my previous line is console.log(element.getAttribute("value") that resuls in the next "COMMAND getElementAttribute RESULT all". And waits like isClickabke and isDisplayed are not working only isExisting get passed well. – Павел Родин Oct 23 '21 at 11:48
  • Oh, and inside needed input type=radio something like #shadow-root(user-agent) is presented – Павел Родин Oct 23 '21 at 11:52
  • 1
    Ok, with Shadow root, you'll need to then select the element using WebdriverIO's shadowRoot API. I'll update my answer with some more details on this. – jamesmortensen Oct 23 '21 at 14:45
  • And here is some more information. I took your advice and used REPL and tried to click() the element. Everything worked out but this time it was label with class ending on "..1r3". Then I tried to run the test with this element but instead of element.isExisting() used browser.pause(). The button was clicked() and then full of joy I ran the test with my element.isDisplayed() instead of browser.pause(). According to terminal the button was clicked() but on the interface nothing happened. I think it somehow linked to really long process of loading the page. When page is loading some elements are – Павел Родин Oct 23 '21 at 15:18
  • displayed (including our radio inputs) and some aren't. But regardless of it they all aren't clickable. And that push me to the idea implementing isClickable() in my browser.waintUntil() and that worked out with the new webElement. So, thanks for your answer, I found out about repl, checked my webElement and picked the right wait. But anyway I want to read about Shadow root and is there any wait to check if the page is fully loaded? – Павел Родин Oct 23 '21 at 15:25
  • This is one of the toughest things I've found -- knowing when the page is loaded. With your waitUntil, you can actually use several components on the page in order to determine if the page is loaded. For example, if your waitUntil returns `elem.isClickable() && someOtherElement.isDisplayed() && anotherElement.isDisplayed()` then you can have the test runner wait until those 3 elements meet the true condition, and what's great about waitUntil is the order doesn't matter. You could also use the $$ element to select all input elements and then wait for all of them to be clickable, if needed. :) – jamesmortensen Oct 23 '21 at 17:03