[BUG] Different behaviour of click action when target clear button is not visible for headless, headful and in docker. #MaterialUI #Chromium

Hi all. Found pretty urgent issue but not sure if it’s a PW or Chromium issue.

Context: Playwright Version: 1.2.1-chromium Operating System: Windows 10, Ubuntu Bionic (docker image) Node version: 12.16.2 (win) / 12.18.0 (ubuntu) Browser: (bundled in pw) 85.0.4182.0 Extra: Material UI element https://material-ui.com/components/autocomplete/

Repro steps:

1. Open a webpage.
2. Choose any value in autocomplete field.
3. Click somewhere to remove focus from the field.
4. Click clear button.

Expected result: Field is cleared.

Actual result: Behaviour is different depending on environment and browser mode (headful, headless (win10), headless in Docker (ubuntu)).

Code sample below will allow to you reproduce the following cases: Headful mode - OK, field is cleared. Headless mode - FAIL, click failed. Force flag does not help.

Headless mode in Docker - FAIL, click succeeded, but field is not cleared:

Code samples and configs I attached my sample project. sampleForPW.zip

And just in case putting sample code here: Test.ts

// @ts-check
const playwright = require("playwright-chromium");
const path = require("path");

(async () => {
  const browser = await playwright.chromium.launch({
    // Change it according your needs
    headless: true,
    slowMo: 100,
    args: [
      '--start-maximized',
      '--window-size=1920,1080',
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--enable-logging',
    ]
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://material-ui.com/components/autocomplete/');
  await page.waitForTimeout(3000);

  await page.type('#combo-box-demo', 'Snatch');
  await page.click('#combo-box-demo-option-0');
  await page.waitForTimeout(2000);

  // Click another hidden button to remove focus from input field
  await page.click('button[aria-label="A generic container that is programmatically focused to test keyboard navigation of our components."]', { force: true });
  await page.waitForTimeout(2000);

  // Uncomment the following line and it will fail in headless mode
  // await page.waitForSelector('button[title="Clear"]', { state: 'attached' });

  const before = path.format({
    dir: './screenshots/',
    name: 'before',
    ext: '.png',
  });
  await page.screenshot({ path: before });

  // Expected behavior: text is cleared after clicking clear button
  await page.click('button[title="Clear"]', { force: true });
  const after = path.format({
    dir: './screenshots/',
    name: 'after',
    ext: '.png',
  });
  await page.waitForTimeout(2000);
  await page.screenshot({ path: after });

  await browser.close();
})();

Dockerfile:

# https://hub.docker.com/_/microsoft-playwright
# https://github.com/microsoft/playwright/blob/v1.2.1/docs/docker/Dockerfile.bionic

FROM mcr.microsoft.com/playwright:bionic

USER root

RUN  apt-get update \
	 && apt-get install -y sudo \
	 && usermod -aG sudo pwuser \
	 && echo "pwuser ALL=(ALL) NOPASSWD: ALL" | tee -a /etc/sudoers \
     && apt-get install -y gnupg2 \
     && apt-get install -y wget --no-install-recommends \
     && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
	 && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
	 && apt update \
	 && apt install yarn \
     && yarn add playwright-chromium@1.2.1

USER root

docker-compose.yml:

version: "3.7"
services:
  pw_sample:
    image: pw_sample
    network_mode: host
    build:
      context: .
    volumes:
      - ./src:/src
      - ./screenshots:/screenshots
    environment:
      DEBUG: pw:api
      IS_DOCKER: 1
    command: /bin/sh -c "node ./src/Test.ts"

package.json:

{
  "devDependencies": {
    "fs": "^0.0.1-security",
    "path": "^0.12.7",
    "playwright-chromium": "^1.2.1",
    "ts-node": "^8.3.0",
    "tslib": "^1.10.0",
    "typescript": "^3.6.2"
  }
}

Launching Win 10 launching command: node src/Test.ts Run in Docker: docker-compose up --build --abort-on-container-exit --exit-code-from pw_sample

Possible workarounds Possible workaround for Docker case is the second click depending on fact that it’s run via Docker:

// Expected behavior: text is cleared after clicking clear button
await page.click('button[title="Clear"]', { force: true });
if (process.env.IS_DOCKER) {
  await page.click('button[title="Clear"]', { force: true });
}

[dgozman]

Hi @DJ-Glock. I am being unlucky with reproducing this, today https://material-ui.com/components/autocomplete/ is just broken for me both under Playwright, and in my regular browser. DevTools shows that some main.js script does not load. I’ll give it another try in a while.

[pavelfeldman]

Why was this issue closed?

We are prioritizing the bugs based on the upvotes, recency and our ability to act. It looks like this issue only has a handful of upvotes, has not been touched recently and/or we lack sufficient feedback to act on it. We are closing issues like this one to keep our bug database maintainable. Please feel free to open a new issue and link this one to it if you think this is a mistake.