[BUG] PW says radio button hasn't changed its state but it has
See original GitHub issueContext:
- Playwright Version: 1.25.2
- Operating System: Manjaro Linux
- Node.js version: 16.16.0
- Browser: Chromium
Code Snippet
await this.radioButtons.nth(1).check();
Describe the bug
Playwright successfully checks the radio button, but wrongfully claims that it hasn’t changed its state and therefore fails the test:
locator.check: Clicking the checkbox did not change its state
=========================== logs ===========================
waiting for selector "data-testid=Label-label >> nth=1"
selector resolved to visible <label for="noShow" class="item" data-testid="Label-lab…>…</label>
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
performing click action
click action done
waiting for scheduled navigations to finish
navigations have finished
============================================================
See the screenshots from the traces, the second radio button is the one it is supposed to click and it does:
Before
After
Workaround
It works fine with a simple click()
action, but this seems like a Playwright bug to me and it would be preferable to use the dedicated check()
functionality instead of the click.
The element is an actual radio button, so the check()
action should work on it:
<label for="noShow" class="item" data-testid="Label-label">
<input type="radio" id="noShow" class="" value="noShow">
Issue Analytics
- State:
- Created a year ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
50442 – Radio button group state is not restored correctly
The state is restored. The radio button becomes "on". 3. The second input tag is parsed. It has "checked" attribute. So, this radio...
Read more >Radio Buttons "Checked" Attribute Not Working - Stack Overflow
This might be it: Is there a bug with radio buttons in jQuery 1.9.1? In short: Don't use attr() but prop() for checking...
Read more >Radio buttons with none selected - UX Stack Exchange
My answer to your problem is then to make an extra radio button, non-display, with no label, and being the default "checked" option....
Read more >HTML 5.2: 4.10. Forms - W3C
Radio buttons can be distinguished from each other in the submission by giving them different values, using the value attribute. Multiple ...
Read more ><input type="radio"> - HTML: HyperText Markup Language
Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The only existing solution is to use
click()
instead ofcheck()
since this bug won’t be fixed. At this point I think it’s generally advisable to only useclick()
for everything, sincecheck()
has other limitations as well.I am facing same issue. I can see on on chromium that it changes the state(radio button works fine) but it still throws this error. Any solution to that?