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

0

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

6 Comments

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.
Oh, and inside needed input type=radio something like #shadow-root(user-agent) is presented
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.
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
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?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.