iamyoki / playwright-watch Goto Github PK
View Code? Open in Web Editor NEW🙈🐵 Run Playwright in watch mode
License: MIT License
playwright-watch's People
Contributors
Stargazers
Watchers
playwright-watch's Issues
[Feature]: allow paths different than the playwright config paths
The scenario is as follows: I'm running playwright with only the .test.ts files in the paths folder.
What I'd like to do is to run the tests on every change of every file in my lib folder - but not include these files in the playwright paths.
Test fails only with playwright-watch
Hi,
Thanks for your tool.
I tried it with a test and it failed: using playwright though it works and I can't understand why.
Here's some context: there is a login function I call beforeEach test that also accepts cookie consent.
const login({user, password}) => async ({page}) => {
...
await acceptCookieConsent({page})
}
const acceptCookieConsent = async ({page}) => {
const cookieConsent = await page.locator('_.element-class_')
if (cookieConsent) {
await cookieConsent.click()
}
}
It reaches timeout (30s) here and fails:
if (cookieConsent) {
await cookieConsent.click()
^
}
I thought it was a straight-forward wrapper for Playwright, but seems to deeply change the way Playwright is used (for instance headed parameter does not work) and the result it gives.
Actually I had to use Chokidar as suggested here
Support for a regular expression as testMatch config option
playwright.config.cjs:
module.exports = {
testMatch: /.*\.e2e\.(test|spec)\.(js|ts|mjs)/
}running:
npx playwright-watch test -c playwright.config.cjsshows the error:
TypeError: Non-string provided as watch path: /.*\.e2e\.(test|spec)\.(js|ts|mjs)/,!node_modules
at unifyPaths (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\chokidar\index.js:96:11)
at FSWatcher.add (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\chokidar\index.js:411:15)
at Object.watch (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\chokidar\index.js:969:11)
at watch (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\lib\watch.js:18:12)
at Object.defaultCommand [as handler] (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\commands\defaultCommand.js:7:3)
at C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs:1:9052
at j (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs:1:4931)
at M.applyMiddlewareAndGetResult (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs:1:9021)
at M.runCommand (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs:1:7206)
at Bt.[runYargsParserAndExecuteCommands] (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs:1:54693)
This works when running Playwright directly with npx playwright test --browser=chromium -c playwright.config.cjs.
sh: playwright: command not found
Trying this out, but when starting it immediately says
sh: playwright: command not found
while playwright is installed as dev dependency.
Support for a EcmaScript module as config
package.json:
{
"private": true,
"type": "module",
"devDependencies": {
"@playwright/test": "^1.14.1",
"playwright-watch": "^1.3.19"
}
}playwright.config.js:
export default {
}command:
npx playwright-watch testgives the error:
C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\loaders.js:32
throw error;
^
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\jonas\Desktop\tic-tac-toe\playwright.config.js from C:\Users\jonas\
Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\loaders.js not supported.
Instead change the require of playwright.config.js in C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\loade
rs.js to a dynamic import() which is available in all CommonJS modules.
at module.exports (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\import-fresh\index.js:32:59)
at loadJs (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\loaders.js:16:18)
at ExplorerSync.loadFileContentSync (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\ExplorerSync.js:84
:26)
at ExplorerSync.createCosmiconfigResultSync (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\ExplorerSy
nc.js:89:30)
at ExplorerSync.loadSearchPlaceSync (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\ExplorerSync.js:70
:25)
at ExplorerSync.searchDirectorySync (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\ExplorerSync.js:55
:32)
at run (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\ExplorerSync.js:35:27)
at cacheWrapperSync (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\cacheWrapper.js:28:18)
at ExplorerSync.searchFromDirectorySync (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\ExplorerSync.j
s:47:49)
at ExplorerSync.searchSync (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\cosmiconfig\dist\ExplorerSync.js:27:25)
at getWatchPath (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\lib\getWatchPath.js:5:22)
at Object.defaultCommand [as handler] (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\commands\default
Command.js:7:9)
at C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs:1:9052
at j (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs:1:4931)
at M.applyMiddlewareAndGetResult (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\bu
ild\index.cjs:1:9021)
at M.runCommand (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs:1:7
206)
at Bt.[runYargsParserAndExecuteCommands] (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\
yargs\build\index.cjs:1:54693)
at Bt.parse (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs:1:36968
)
at Bt.get [as argv] (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\node_modules\yargs\build\index.cjs
:1:57661)
at Object.<anonymous> (C:\Users\jonas\Desktop\tic-tac-toe\node_modules\playwright-watch\bin\playwright-watch.js:42:25) {
code: 'ERR_REQUIRE_ESM'
}
It works when running Playwright directly with:
npx playwright test`yarn test:watch` at the very first run executes test twice
Dockerfile
FROM mcr.microsoft.com/playwright:focal
ENV LANG C.UTF-8
WORKDIR /app
RUN yarn install
User pwuser
RUN npx playwright install
package.json
{
"scripts": {
"test": "playwright test",
"test:watch": "playwright-watch exec yarn test"
},
"devDependencies": {
"@playwright/test": "^1.16.2",
"@types/node": "^16.11.6",
"playwright-watch": "^1.3.21",
}
}foo.spec.ts
import { expect, test } from "@playwright/test"
test.describe("yarn test:watch", () => {
test.beforeAll(async () => {
console.log("beforeAll:")
})
test.afterAll(async () => {
console.log("afterAll:")
})
test("test1", async ({ page }) => {
expect(true).toBe(true)
})
})making sure yarn test only runs once for foo.spec.ts
pwuser@309e51291d88:/app$ yarn test
yarn run v1.22.10
warning package.json: No license field
$ playwright test
Using config at /app/playwright.config.ts
Running 1 test using 1 worker
beforeAll:
✓ tests/foo.spec.ts:23:3 › yarn test:watch › test1 (288ms)
afterAll:
1 passed (621ms)
Done in 1.00s.
yarn test:watch runs the test twice on the initial run
Notice
- Using config at /app/playwright.config.ts
- beforeAll
- afterAll
They are output twice.
💾 HERE, I saved foo.spec.ts to run again
After that, it only runs once on a save.
pwuser@309e51291d88:/app$ yarn test:watch
yarn run v1.22.10
warning package.json: No license field
$ playwright-watch exec yarn test
warning package.json: No license field
warning package.json: No license field
$ playwright test
$ playwright test
Using config at /app/playwright.config.ts
Using config at /app/playwright.config.ts
Running 1 test using 1 worker
[Error: ENOENT: no such file or directory, scandir '/app/test-results'] {
errno: -2,
code: 'ENOENT',
syscall: 'scandir',
path: '/app/test-results'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
beforeAll:
✓ tests/foo.spec.ts:23:3 › yarn test:watch › test1 (309ms)
afterAll:
1 passed (644ms)
warning package.json: No license field // <= 💾 HERE, I saved foo.spec.ts to run again
$ playwright test
Using config at /app/playwright.config.ts
Running 1 test using 1 worker
beforeAll:
✓ tests/foo.spec.ts:23:3 › yarn test:watch › test1 (308ms)
afterAll:
1 passed (637ms)
SyntaxError: Unexpected token '.'
please compile to es6
No loader for `ts` files
My configuration is in .ts files and when using the watch I get the error:
Error: No loader specified for extension ".ts"
ERR_REQUIRE_ESM on Windows 10
I'm on Windows 10 in a new SvelteKit project, "playwright-watch": "1.3.23".
I'm having this error calling it with npx playwright-watch test:
C:\project\node_modules\cosmiconfig\dist\loaders.js:32
throw error;
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\project\playwright.config.js from C:\project\node_modules\cosmiconfig\dist\loaders.js not supported.
Instead change the require of playwright.config.js in C:\project\node_modules\cosmiconfig\dist\loaders.js to a dynamic import() which is available in all CommonJS modules.
at module.exports (C:\project\node_modules\import-fresh\index.js:32:59)
at loadJs (C:\project\node_modules\cosmiconfig\dist\loaders.js:16:18)
at ExplorerSync.loadFileContentSync (C:\project\node_modules\cosmiconfig\dist\ExplorerSync.js:84:26)
at ExplorerSync.createCosmiconfigResultSync (C:\project\node_modules\cosmiconfig\dist\ExplorerSync.js:89:30)
at ExplorerSync.loadSearchPlaceSync (C:\project\node_modules\cosmiconfig\dist\ExplorerSync.js:70:25)
at ExplorerSync.searchDirectorySync (C:\project\node_modules\cosmiconfig\dist\ExplorerSync.js:55:32)
at run (C:\project\node_modules\cosmiconfig\dist\ExplorerSync.js:35:27)
at cacheWrapperSync (C:\project\node_modules\cosmiconfig\dist\cacheWrapper.js:28:18)
at ExplorerSync.searchFromDirectorySync (C:\project\node_modules\cosmiconfig\dist\ExplorerSync.js:47:49)
at ExplorerSync.searchSync (C:\project\node_modules\cosmiconfig\dist\ExplorerSync.js:27:25)
at getWatchPath (C:\project\node_modules\playwright-watch\dist\lib\getWatchPath.js:7:22)
at Object.defaultCommand [as handler] (C:\project\node_modules\playwright-watch\dist\commands\defaultCommand.js:9:9)
at C:\project\node_modules\yargs\build\index.cjs:1:9052
at j (C:\project\node_modules\yargs\build\index.cjs:1:4931)
at M.applyMiddlewareAndGetResult (C:\project\node_modules\yargs\build\index.cjs:1:9021)
at M.runCommand (C:\project\node_modules\yargs\build\index.cjs:1:7206)
at Jt.[runYargsParserAndExecuteCommands] (C:\project\node_modules\yargs\build\index.cjs:1:56370)
at Jt.parse (C:\project\node_modules\yargs\build\index.cjs:1:38250)
at Jt.get [as argv] (C:\project\node_modules\yargs\build\index.cjs:1:59486)
at Object.<anonymous> (C:\project\node_modules\playwright-watch\dist\bin\playwright-watch.js:45:25) {
code: 'ERR_REQUIRE_ESM'
}
with this playwright.config.js:
// import type { PlaywrightTestConfig } from "@playwright/test";
// @ts-check
import { devices } from "@playwright/test";
// const config: PlaywrightTestConfig = {
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
testDir: "./tests",
use: {
trace: "on-first-retry",
screenshot: "only-on-failure",
},
projects: [
{
name: "chromium",
use: { ...devices["Desktop Chrome"] },
},
{
name: "firefox",
use: { ...devices["Desktop Firefox"] },
},
{
name: "webkit",
use: { ...devices["Desktop Safari"] },
},
],
};
export default config;
and this example.spec.js:
import { test, expect } from "@playwright/test";
test("basic test", async ({ page }) => {
await page.goto("http://localhost:3000");
const title = page.locator("h1");
await expect(title).toHaveText("h1");
});
Why?
[Feature]: a way to prevent closing of headful tests
During development of frontend apps, I'd probably want to leave the browser open for debugging.
Does not pass the configuration file to playwright
When sending a custom configuration file, the source only extracts the paths but does not use the configuration file when running: watch(getWatchPath(config), ['npx', 'playwright', ...commands]).
Tests do not run
I'm trying to run with the following configurtaion:
module.exports = {
testMatch: 'src/**/*.test.ts',
projects: [
{
name: 'Chrome Stable',
use: {
browserName: 'chromium',
channel: 'chrome',
headless: false
},
},
{
name: 'Desktop Safari',
use: {
browserName: 'webkit',
viewport: {
width: 1200,
height: 750
},
}
},
{
name: 'Desktop Firefox',
use: {
browserName: 'firefox',
viewport: {
width: 800,
height: 600
},
}
},
]
};
This is the same configuration I'm using with playwright test.
With playwright-watch test the command line is just stuck and nothing's happening.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.