Playwright tests do not work on Github CI

[etc-tiago]

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

14.x

What browser are you using?

Chrome Headless

What operating system are you using?

Ubuntu 18/20

How are you deploying your application?

Vercel

Describe the Bug

I did several tests this week and couldn't find the reason why nextjs doesn't work with headless on CI.

The test code can be found at https://github.com/etc-tiago/demo-nextjs-playwright-github-workflow

The start code is https://github.com/vercel/next.js/tree/canary/examples/with-playwright

Among the attempts are:

• use the next dev command to start and test with playwright
• use next build and next start and then start playwright.
• use the next build command and start next start within playwright's web server settings.

Apparently there's something with react's hooks. Because the clicks on the button that use the next/router and switch of states are not working. Clicks on links work normally.

I did other tests using create-react-app, to validate if it's something related to react or nextjs, and the tests worked.

Expected Behavior

Tests pass when executing actions using hooks, such as useRouter (next/router) during tests with playwright

To Reproduce

The test code can be found at https://github.com/etc-tiago/demo-nextjs-playwright-github-workflow

[oliverpaulsen]

I tried to reproduce the bug and it only failed for mobile tests.
This was caused by the layout not being responsive and the "about" card being cut off.

I fixed it by adding

.container { height: auto; }

in the media query of the "Home.modules.css" file (line 116)

[etc-tiago]

@oliverpaulsen I confess that I am ashamed. I've been working with CSS for years and I haven't thought about that detail. Thank you very much!

[TouchSek]

@etc-tiago how did you resolved it? how to make it work in GitHub action?

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.