nxkit
nxkit copied to clipboard
nxkit
Playwright: devServerTarget not working with webpack served projects
Current Behavior
When using the devServerTarget with a webpack served application, e2e tests fail as playwright cannot establish a connection with the localhost port hosting the frontend project.
If vite is used as the frontend project bundler, e2e tests work as excepted when using the devServerTarget option.
Also, when using webpack, if the frontend project is served in a separate terminal instance and the e2e tests are run using
--baseUrl http://localhost:4200 --skipServe
the tests work.
Expected Behaviour
E2E tests using the devServerTarget with a webpack served project should work as they do with a vite served project.
Github Repo
No response
Steps to Reproduce
-
npx create-nx-workspace@latest acme --nx-cloud false -
cd acme && npm i -D @nrwl/react @nxkit/playwright -
npx nx g @nrwl/react:app myapp --e2eTestRunner none --bundler webpack -
npx nx g @nxkit/playwright:proj myapp-e2e --frontendProject myapp -
npx nx e2e myapp-e2e
Nx Report
> NX Report complete - copy this into the issue template
Node : 16.17.0
OS : darwin arm64
pnpm : 7.14.2
nx : 15.4.2
@nrwl/angular : Not Found
@nrwl/cypress : 15.4.2
@nrwl/detox : Not Found
@nrwl/devkit : 15.4.2
@nrwl/esbuild : Not Found
@nrwl/eslint-plugin-nx : 15.4.2
@nrwl/expo : Not Found
@nrwl/express : Not Found
@nrwl/jest : 15.4.2
@nrwl/js : 15.4.2
@nrwl/linter : 15.4.2
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : 15.4.2
@nrwl/react-native : Not Found
@nrwl/rollup : 15.4.2
@nrwl/schematics : Not Found
@nrwl/storybook : Not Found
@nrwl/web : 15.4.2
@nrwl/webpack : 15.4.2
@nrwl/workspace : 15.4.2
@nrwl/vite : 15.4.2
typescript : 4.8.4
---------------------------------------
Local workspace plugins:
---------------------------------------
Community plugins:
@nxkit/playwright: 1.0.0
Failure Logs
pnpm nx e2e myapp-e2e
> nx run myapp2-e2e:e2e
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:4200/, http://127.0.0.1:4200/
<i> [webpack-dev-server] 404s will fallback to '/index.html'
> NX Web Development Server is listening at http://localhost:4200/
Entrypoint main [big] 1.6 MiB (1.89 MiB) = runtime.js 50.4 KiB vendor.js 1.5 MiB main.js 57.5 KiB 3 auxiliary assets
Entrypoint polyfills [big] 773 KiB (956 KiB) = runtime.js 50.4 KiB polyfills.js 723 KiB 2 auxiliary assets
Entrypoint styles [big] 436 KiB (548 KiB) = runtime.js 50.4 KiB styles.css 399 bytes styles.js 385 KiB 2 auxiliary assets
chunk (runtime: runtime) main.js (main) 49.3 KiB [initial] [rendered]
chunk (runtime: runtime) polyfills.js (polyfills) 674 KiB [initial] [rendered]
chunk (runtime: runtime) runtime.js (runtime) 33.8 KiB [entry] [rendered]
chunk (runtime: runtime) styles.css, styles.js (styles) 367 KiB (javascript) 398 bytes (css/mini-extract) [initial] [rendered]
chunk (runtime: runtime) vendor.js (vendor) (id hint: vendor) 1.48 MiB [initial] [rendered] split chunk (cache group: vendor) (name: vendor)
webpack compiled successfully (33f1f1affff67af0)
running command: pnpm exec playwright test --output dist/apps/myapp2-e2e/test-results --config apps/myapp2-e2e/playwright.config.ts
No errors found.
Running 3 tests using 3 workers
1) [webkit] › app.spec.ts:3:5 › myapp2 ===========================================================
page.goto: Could not connect to the server.
=========================== logs ===========================
navigating to "http://localhost:4200/", waiting until "load"
============================================================
2 |
3 | test('myapp2', async ({ page }) => {
> 4 | await page.goto('/');
| ^
5 |
6 | const greeting = page.locator('h1');
7 | await expect(greeting).toContainText('Welcome myapp2');
at /Users/sduque/dev/playground/acme/apps/myapp2-e2e/src/e2e/app.spec.ts:4:14
at /Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:376:15
at TestInfoImpl._runFn (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/testInfo.js:144:7)
at /Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:331:26
at TimeoutManager.runWithTimeout (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/timeoutManager.js:62:7)
at TestInfoImpl._runWithTimeout (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/testInfo.js:133:26)
at WorkerRunner._runTest (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:312:5)
at WorkerRunner.runTestGroup (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:192:11)
at process.<anonymous> (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/worker.js:74:5)
2) [chromium] › app.spec.ts:3:5 › myapp2 =========================================================
page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:4200/
=========================== logs ===========================
navigating to "http://localhost:4200/", waiting until "load"
============================================================
2 |
3 | test('myapp2', async ({ page }) => {
> 4 | await page.goto('/');
| ^
5 |
6 | const greeting = page.locator('h1');
7 | await expect(greeting).toContainText('Welcome myapp2');
at /Users/sduque/dev/playground/acme/apps/myapp2-e2e/src/e2e/app.spec.ts:4:14
at /Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:376:15
at TestInfoImpl._runFn (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/testInfo.js:144:7)
at /Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:331:26
at TimeoutManager.runWithTimeout (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/timeoutManager.js:62:7)
Additional Information
No response
Code of Conduct
- [X] I agree to follow this project's Code of Conduct
