Is there a way to clear the value attribute from input type="radio" in Playwright?

Question

How do I literally clear the value (or turn it into null) from the following input using playwright (to make it empty, and not selected)?

<input
    type="radio"
    id="yes-in-hand"
    value={true}
/>

await this.page.$eval('input[id="yes-in-hand"]', el => el.removeAttribute('value'));

await this.page.locator('input[id="yes-in-hand"]').fill(null); // or undefined - it throws an error: expect a string in .fill function

await this.page.locator('input[id="yes-in-hand"]').uncheck();
// It throws an error: locator.uncheck: Clicking the checkbox did not change its state

But it doesn't work and should have a proper way to do so that by just reading https://playwright.dev/docs/ I couldn't find.

Thank you.

Have you tried removing the element and putting back an exact copy without the value attribute? — Some random IT boy, Sep 20 '22 at 20:19
Thanks for the idea, and by the way, is it possible to do so in playwright? I was thinking of a more idiomatic solution. Something like https://github.com/microsoft/playwright/issues/14041 — Daniel Cassiano Chaves, Sep 20 '22 at 20:46
Worst case you could use the DOM API's to do so. I lack expertise in Playwright and just wanted to throw an idea that I had. Hence the comment and not the answer :) — Some random IT boy, Sep 21 '22 at 07:58

score 2 · Accepted Answer · answered Sep 21 '22 at 09:21

From what I understand, you want to change the value of an attribute inside your Playwright project.

One good reference is the following issue where the use case was removing an attribute: https://github.com/microsoft/playwright/issues/4924

If we apply the same logic, we can use Element.setAttribute(name, value) to set the inputs attribute to false. https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

So the example would be something like this:

const elementHandle = await page.locator(#yes-in-hand);
await elementHandle.evaluate(node => node.setAttribute('value', false));

score 1 · Answer 2 · answered Sep 21 '22 at 14:45

1

const elementHandle = await page.locator(#yes-in-hand);
await elementHandle.evaluate(node => node.value = "false");

answered Sep 21 '22 at 14:45

2 Answers2