[Regression]: Locators of elements changing from/to hidden have operations hanging in 1.45.0

[bschmaltz]

Last Good Version

1.44.1

First Bad Version

1.45.0

Steps to reproduce

Performing async operations on hidden (display none) locator seems to hang indefinitely, while previously they would resolve

    const splashRoot = page.locator("#splash-root");
    console.log("splashRoot", splashRoot);
    const style = await splashRoot.getAttribute("style");
    console.log("style", style);

Expected behavior

Getting a hidden elements attribute should resolve. I should log the locator on the second line and log the style attribute on the fourth line.

Actual behavior

I'm only hitting the first log splashRoot locator('#splash-root')

Then, the browser will close for test timeout

locator.getAttribute: Timeout 20000ms exceeded.
Call log:
  - waiting for locator('#splash-root')

    at captureRawStack (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\utils\stackTrace.js:49:17)
    at captureLibraryStackTrace (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\utils\stackTrace.js:55:17)
    at Frame._wrapApiCall (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\client\channelOwner.js:163:65)
    at Proxy.<anonymous> (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\client\channelOwner.js:124:33)
    at Frame.getAttribute (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\client\frame.js:381:40)
    at Locator.getAttribute (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\client\locator.js:217:30)
    at callback (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\tests\shopping\shopping-helpers.ts:274:36)
    at Timeout._onTimeout (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\tests\shopping\shopping-helpers.ts:244:19)
    at listOnTimeout (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node:internal\timers:569:17)
    at processTimers (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node:internal\timers:512:7)
<inner error>
TimeoutError: Timeout 20000ms exceeded.
Call log:
  - waiting for locator('#splash-root')

    at ProgressController.run (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\server\progress.js:78:26)
    at Frame._callOnElementOnceMatches (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\server\frames.js:1429:23)
    at Frame.getAttribute (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\server\frames.js:1081:17)
    at FrameDispatcher.getAttribute (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\server\dispatchers\frameDispatcher.js:194:37)
    at FrameDispatcher._handleCommand (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\server\dispatchers\dispatcher.js:94:40)
    at DispatcherConnection.dispatch (C:\Users\beschmal\source\repos\edge.shoreline_testing\shoreline-tests\node_modules\playwright-core\lib\server\dispatchers\dispatcher.js:361:39) {
  [Symbol(step)]: {
    stepId: 'pw:api@676',
    location: {
      file: 'C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\utils\\stackTrace.js',
      line: 49,
      column: 17,
      function: 'captureRawStack'
    },
    category: 'pw:api',
    title: 'locator.getAttribute(#splash-root)',
    apiName: 'locator.getAttribute',
    params: { selector: '#splash-root', name: 'style', strict: true },
    boxedStack: undefined,
    steps: [ [Object] ],
    complete: [Function: complete],
    endWallTime: 1719379639563,
    error: {
      message: 'TimeoutError: locator.getAttribute: Timeout 20000ms exceeded.\n' +
        'Call log:\n' +
        "  \x1B[2m- waiting for locator('#splash-root')\x1B[22m\n",
      stack: 'locator.getAttribute: Timeout 20000ms exceeded.\n' +
        'Call log:\n' +
        "  \x1B[2m- waiting for locator('#splash-root')\x1B[22m\n" +
        '\n' +
        '    at captureRawStack (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\utils\\stackTrace.js:49:17)\n' +
        '    at captureLibraryStackTrace (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\utils\\stackTrace.js:55:17)\n' +
        '    at Frame._wrapApiCall (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\client\\channelOwner.js:163:65)\n' +
        '    at Proxy.<anonymous> (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\client\\channelOwner.js:124:33)\n' +
        '    at Frame.getAttribute (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\client\\frame.js:381:40)\n' +
        '    at Locator.getAttribute (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\client\\locator.js:217:30)\n' +
        '    at callback (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\tests\\shopping\\shopping-helpers.ts:274:36)\n' +
        '    at Timeout._onTimeout (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\tests\\shopping\\shopping-helpers.ts:244:19)\n' +
        '    at listOnTimeout (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node:internal\\timers:569:17)\n' +
        '    at processTimers (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node:internal\\timers:512:7)\n' +
        '<inner error>\n' +
        'TimeoutError: Timeout 20000ms exceeded.\n' +
        'Call log:\n' +
        "  \x1B[2m- waiting for locator('#splash-root')\x1B[22m\n" +
        '\n' +
        '    at ProgressController.run (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\server\\progress.js:78:26)\n' +
        '    at Frame._callOnElementOnceMatches (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\server\\frames.js:1429:23)\n' +
        '    at Frame.getAttribute (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\server\\frames.js:1081:17)\n' +
        '    at FrameDispatcher.getAttribute (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\server\\dispatchers\\frameDispatcher.js:194:37)\n' +
        '    at FrameDispatcher._handleCommand (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\server\\dispatchers\\dispatcher.js:94:40)\n' +
        '    at DispatcherConnection.dispatch (C:\\Users\\beschmal\\source\\repos\\edge.shoreline_testing\\shoreline-tests\\node_modules\\playwright-core\\lib\\server\\dispatchers\\dispatcher.js:361:39)'
    }
  }
}
Closing edge
Context was defined

### Additional context

_No response_

### Environment

```shell
System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 37.98 GB / 63.95 GB
  Binaries:
    Node: 18.20.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.90.2 - C:\Users\beschmal\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  npmPackages:
    @playwright/test: ^1.43.1 => 1.45.0

[mxschmitt]

Could you help with a repro which we can run locally?

I tried the following and it works for me:

import { test } from '@playwright/test';

test('repro', async ({ page }) => {
  await page.setContent(`<div style="display: none">Hello, World!</div>`);
  const locator = page.locator('div');
  const style = await locator.getAttribute("style");
  console.log("style", style);
});

[benoitf]

it looks like we're facing the same issue on our CI
podman-desktop/podman-desktop#7815

(job execution https://github.com/containers/podman-desktop/actions/runs/9677308859/job/26698644065?pr=7815 )

[bschmaltz]

One detail is that the element was visible and will switch to hidden by the page adding an inline style display: none;. I think @benoitf 's case is similar in that they're waiting for an element to become visible.

[pavelfeldman]

@benoitf I ran podman tests on fresh checkout (1.44), but some of them failed - I probably need to set up some docker containers for it first.

 Test Files  7 failed | 1 passed (8)
      Tests  4 failed | 9 passed (42)
   Start at  11:28:56

[pavelfeldman]

Having a repro would help us identify an issue, so if you can reduce it or repro it on a fresh podman checkout w/ instructions, I'm happy to take a look.

[cbr7]

@pavelfeldman I've created a branch on the Podman Desktop repo for you https://github.com/containers/podman-desktop/tree/playwright_debug_branch that has yarn command yarn test:e2e:welcome which runs only one test suite that does not require any podman machine to be available locally.

Changing the value in tests/playwright/package.json for PW from 1.45.0 to 1.44.1 will make the tests pass (they fail with 1.45.0).

EDIT: yarn install should be ran after initial pulling and after any change in package.json file.

[pavelfeldman]

I can reproduce the regression, it is Electron-related. Btw, some test isolation would not hurt - I can see all your tests are using the same page. We are using fixtures for nicer electron tests upstream: https://github.com/microsoft/playwright/blob/main/tests/electron/electronTest.ts