Search code examples
javascripthtmlcoded-ui-testswdio-v6

How to click input type=radio in webdriverIO

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

Solution

  • 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.