[BUG]: subtree intercepts pointer events, Unable to click

[vetalmas]

• Playwright Version: "^1.28.1"
  For 1.27.13 (if it is correct version) was the same trouble
• Operating System: Windows 11

Code Snippet

import { test, expect } from '@playwright/test';
import fs from 'fs';
import path from "path";

test('File downloading with customized name and path', async ({ page }) => {
    const fileName = 'customFileName.txt';
    await page.goto('https://pinetools.com/random-file-generator');
    await page.locator('.boton').click();
    
    const [ download ] = await Promise.all([
        page.waitForEvent('download'),
        page.locator('li .state-1').click(),
    ]);

    const fileDestination = 'download/' + fileName;
    await download.saveAs(fileDestination);

    expect(path.basename(fileDestination), 'Assert file name is as expected').toBe(fileName);
    expect((await fs.promises.stat(fileDestination)).size / 1000000 /*bytes to MB*/, 'Assert file size is as expected').toBeGreaterThanOrEqual(5);
});

Faced with problem as described here. But it is only in headless mode. With --headed param it's all ok. Project I'm using has next settings:

{
      name: 'Google Chrome',
      use: {
        viewport : null,
        launchOptions: {
          args: ["--start-maximized"]
        },
      },
    },

And when i comment viewport and launchoptions (use{} is empty) it's ok with both headed and headless run mode

config.txt

[mxschmitt]

Inside the error message you see, that the cookie modal is in the way.

 <p>…</p> from <div id="aviso_cookies">…</div> subtree intercepts pointer events +11ms

You need to accept it first before being able to click on an element which is underneath it.

When running it headed, the modal is not in the way, since your screen is larger.

await page.locator('#aviso_cookies').getByRole('link', { name: 'Got it!' }).click();

do this after your page.goto then it works.

[vetalmas]

Inside the error message you see, that the cookie modal is in the way.

Hi @mxschmitt
can u help me with similar trouble pls?

when i run all my tests , I got subtree intercepts pointer events again in one of them
but it's ok when i run only that "bugged" test

Error>>>

Code snippet
error on

await locators.stateField.click();

import { test, expect } from "@playwright/test";
import fs from 'fs';
import { parse } from 'csv-parse/sync';
import {Locators} from '../../utils/params-locators';

test.describe('Test parameterization with JSON and csv files', () => {
[input.csv](https://github.com/microsoft/playwright/files/10145616/input.csv)

  const dataSets = JSON.parse(JSON.stringify(require("../../test-data/parameterizedExternalFile.json")));
  
  for (const set of dataSets){
    test(`Find prices for ${set.shortName}`, async ({page})=>{
      const url = "https://hotline.ua/";

      // locators to interact
      const searchField = page.locator('[type="text"]');
      const searchBtn = page.locator('.search__btn.flex');
      const resultTitle = page.locator(`//div[contains(text(), "${set.searchQuery}")]`)
      const firstItem = page.locator('.list-item__info.flex-column .list-item__title').nth(0);
      const itemTitle = page.locator('[class="title"]');
      const prices = page.locator('[class="price content"]');
      
      // operations
      await page.goto(url);
      await searchField.fill(set.searchQuery);
      await searchBtn.click();
      await expect(resultTitle, 'Assert search is successful and result title is visible').toBeVisible();
      await firstItem.click();
      expect((await itemTitle.innerText()).includes(set.searchQuery), 'Assert item title includes search query string').toBeTruthy();
      await prices.screenshot({path: `screenshots/ParametersSpec_${set.shortName}.jpg`});
    });
  }
  

  const records = parse(fs.readFileSync("test-data/input.csv"), {
    columns: true
  });
  
  for (const record of records) {
    test(`Parameters in .csv file, test case - ${record.test_case}`, async ({ page }) => {
      const locators = new Locators(page);
      await page.goto(locators.url);
      await locators.firstName.fill(record.first_name);
      await locators.lastName.fill(record.last_name);
      await locators.email.fill(record.email);
      await locators.gender.nth(0).click();
      await locators.mobile.fill(record.mobile);
      await locators.dob.fill(record.dob);
      await locators.dobTitle.click();
      await locators.subjects.fill(record.subject_name);
      await locators.subjectOption.click();
      await locators.hobbies.click();
      await locators.address.fill(record.current_address);
      await locators.stateField.click();
      await locators.stateLocator.click();
      await locators.cityField.click();
      await page.click(record.city_locator);
      await locators.submitBtn.focus();
      await page.keyboard.press('Enter');
      await locators.modalHeader.isVisible();
  
      expect(await locators.tableNameValue).toEqual(`${record.first_name} ${record.last_name}`);
      expect(await locators.tableEmailValue).toEqual(record.email);
      expect(await locators.tableGenderValue).toEqual('Male');
      expect(await locators.tableMobileValue).toEqual(record.mobile);
      expect(await locators.tableDobValue).toEqual(record.dob);
      expect(await locators.tableSubjectsValue).toEqual(record.subject_name);
      expect(await locators.tableFHobbiesValue).toEqual('Music');
      expect(await locators.tableAddressValue).toEqual(record.current_address);
      expect(await locators.tableStateCityValue).toEqual(`${record.state_name} ${record.city_name}`);
      await page.close();
    });
  }
});

class Locators{
    constructor(page){
        this.url = 'https://demoqa.com/automation-practice-form';
        this.firstName = page.locator('#firstName');
        this.lastName = page.locator('#lastName');
        this.email = page.locator('#userEmail');
        this.gender = page.locator(['[class="custom-control custom-radio custom-control-inline"]']);
        this.mobile = page.locator('#userNumber');
        this.dob = page.locator('#dateOfBirthInput');
        this.dobTitle = page.locator('#dateOfBirth-label');
        this.subjects = page.locator('#subjectsInput');
        this.subjectOption = page.locator('#react-select-2-option-0');
        this.hobbies = page.locator('[for="hobbies-checkbox-3"]');
        this.address = page.locator('#currentAddress');
        this.stateField = page.locator('#state');
        this.stateLocator = page.locator('#react-select-3-option-0');
        this.cityField = page.locator('#city');
        this.submitBtn = page.locator('#submit');
        this.tableNameValue = page.locator('//tbody/tr[1]/td[2]').textContent();
        this.tableEmailValue = page.locator('//tbody/tr[2]/td[2]').textContent();
        this.tableGenderValue = page.locator('//tbody/tr[3]/td[2]').textContent();
        this.tableMobileValue = page.locator('//tbody/tr[4]/td[2]').textContent();
        this.tableDobValue = page.locator('//tbody/tr[5]/td[2]').textContent();
        this.tableSubjectsValue = page.locator('//tbody/tr[6]/td[2]').textContent();
        this.tableFHobbiesValue = page.locator('//tbody/tr[7]/td[2]').textContent();
        this.tableAddressValue = page.locator('//tbody/tr[9]/td[2]').textContent();
        this.tableStateCityValue = page.locator('//tbody/tr[10]/td[2]').textContent();
        this.modalHeader = page.locator('.modal-header');
    }
}
module.exports = {Locators}

test data.zip