Visible radio button cannot be clicked ("element is outside of the viewport")

Context:

• Playwright Version: 1.3.0
• Operating System: MacOS Catalina
• Node.js version: 14.7.0
• Browser: Chromium

Code Snippet

The objective is to click/select the radio button with the label “JA” via its ID “existing-customer-input-0”:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({headless: false}, {slowMo: 50});
  // ...
  await page.click('#existing-customer-input-0');
})();

Describe the bug

The problematic section of the tested web page consists of a radio button group with two buttons: The corresponding HTML source code:

<div class="c-button-group">
  <label class="c-button-group__item" for="existing-customer-input-0">
    <input class="c-button-group__input" type="radio" id="existing-customer-input-0" name="existingCustomer" 
    value="yes">
    <span class="c-button-group__label">ja</span>
  </label>
  <label class="c-button-group__item" for="existing-customer-input-1">
    <input class="c-button-group__input" type="radio" id="existing-customer-input-1" name="existingCustomer" 
    value="no">
    <span class="c-button-group__label">nein</span>
  </label>
</div>

Expected behavior: Button “JA” is found and clicked/selected.

Actual behavior: Playwright can’t successfully select the element referenced by the above ID and throws the following error message:

TimeoutError: page.click: Timeout 30000ms exceeded. =========================== logs =========================== [api] waiting for selector “#existing-customer-input-0” [api] selector resolved to visible <input value=“yes” type=“radio” name=“existingCustomer”…/> [api] attempting click action [api] waiting for element to be visible, enabled and not moving [api] element is visible, enabled and does not move [api] scrolling into view if needed [api] done scrolling [api] element is outside of the viewport [api] retrying click action […] It keeps retrying with the same messages as above until the timeout kicks in.

Regarding “element is outside of the viewport”: Not sure what this exactly implies but the element with the ID “existing-customer-input-0” is clearly visible and not overshadowed/hidden during a headful test.

[arjunattam]

Thanks for sharing the link on email. I noticed that the radio button has the following styles and is therefore not located on the page.

left: -9999px;
position: absolute;

I understand how using the text-based selector feels unreliable because of the other element on the page. Do you think we could combine the text selector with another text selector localize the search (text=Parent >> text=Child) into a part of the page? It might also be worth to get your thoughts on #2370

[arjunattam]

Thanks @klctrl. Is this a public website? It’s hard to tell for sure without looking at the css of the html.

Looking at the screenshot, my guess is that the radio button circle is hidden with css and playwright is waiting for the circle to be visible. Couple of alternatives you could try:

1. Force the click to bypass these checks page.click('#existing-customer-input-0', { force: true} ) (this might have other side-effects)
2. Click the parent element with page.click('[for=existing-customer-input-0]')

If you can share a link to the page or a repro case with css, we could find a better solution.