Issue 1:
Hi all - I've run in to a problem that has stumped me for the past day. I think I've narrowed down the scenario and need some help figuring out if I'm on the right track here. (Video and code reproductions below to replicate passing and failing scenarios)

I'm using @tanstack/react-table to render a table in my NextJS application. There is an action button above the table that will display a div when this button is clicked. I'd like to run a playwright test to click on the action button and confirm that the div is displayed, however, when I do, my test time's out with an error of:

locator.click: Target closed
=========================== logs ===========================
waiting for getByTestId('create-address-button')
locator resolved to <button class="ml-auto hidden h-8 lg:flex" data-testid="…>Create Address</button>
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
performing click action
============================================================

The crazy thing is that if I comment out the @tanstack/react-table code, the playwright test successfully targets the action button and my test passes.

My hypothesis is that playwright is attempting to click on the button while the table is rendering/re-rendering/initializing causing the useState setter I'm using in the onClick to go "stale"? I don't want to have to worry about the render state of the table since these actions are different and it's not like I have to wait for the table to finish to click on the button above.

If I remove the setShowDiv from the onClick, the playwright test successfully runs up until the check to see if the div exists (since now we removed the line of code that should set it's visibility) I can also get around this by adding a hard-coded timeout but don't want to do that either.

// index.tsx

const [showDiv, setShowDiv] = useState(false);
...
...
<AddressDataTableToolbar
// comment out this line
table={table}
onClick={(show) => {
setShowDiv(show); // <-- this goes stale possibly?
}}
/>

Is there something fundamental I'm missing or is this a scenario that Playwright should be able to handle?

System info

Playwright Version: 1.34.3

Operating System: macOS

Browser: WebKit

Other info:

Source code

[x ] I provided exact source code that allows reproducing the issue locally.

Local reproduction

Steps

Pull code from https://github.com/uncvrd/tanstack-playwright

run npm install

run npm run dev

In a separate terminal, run npx playwright test --ui

run test called should click on the table header

observe output failure

view index.tsx remove references to @tanstack/react-table code (i left comments on the lines to remove, lines: 23, 28, 30, 84)

run test called should click on the table header

observe successful test

I just want to click the button and not have to wait for the table to render because these two functionalities are separate

Here's a video showing the initial failed state (the first 0:25 seconds are just waiting for it to fail)

Screen.Recording.2023-05-27.at.4.18.08.PM.mov

Here's a video showing me removing the table code and running the test to successful completion where the button is clicked and the div is displayed.

Screen.Recording.2023-05-27.at.4.18.57.PM.mov

Hopefully I've identified the reason for the failing test, but please let me know if the title does not accurately represent the reason why this test fails

[Describe expected behavior]

I should not have to wait for the table to render to click on the button

[Describe actual behavior]

The test fails due to locator.click: Target closed

Thanks a lot for the help :)

Issue 2:
System info

Playwright Version: 1.29.2

Operating System: MacOS Ventura

Browser: Chrome

NodeJS version: v16.16.0

Other info: Running the android server for Pixel 4 and Nexus 5X with Android 11. Issue exists on real device as well as emulator.

Source code

I provided exact source code that allows reproducing the issue locally.

Server script

async function launchAndroidServer() {
const browserServer = await _android.launchServer({
port: 5555,
wsPath: "ws",
});

const wsEndpoint = browserServer.wsEndpoint();
console.log("wsEndpoint:: ", wsEndpoint);
}

launchAndroidServer();

Client Script

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

(async () => {
const device = await _android.connect(
'ws://127.0.0.1:5555/ws'
);

console.log(`Model :: ${device.model()}, serial:: ${device.serial()}`)

await device.shell('am force-stop com.android.chrome');
const context = await device.launchBrowser();

const page = await context.newPage();
await page.goto('https://playwright.dev/');

await page.close();
await context.close();
})();

Steps

Run the server script

Run the client script

Expected

New browser page should be opened and test should get executed.

Actual

The client script execution doesn't proceed after the await context.newPage() command. The new chrome browser page is opened with the URL as about:blank and the test does not proceed.

Client and server logs added below:

pw_android_client.log

pw_android_server.log