Getting started with Playwright with a single command
npm init playwright@latest
# Or for Yarn
yarn create playwright
# Or for pnpm
pnpm create playwright
"npm init playwright" implementation
Home Page: https://npmjs.com/package/create-playwright
License: MIT License
Getting started with Playwright with a single command
npm init playwright@latest
# Or for Yarn
yarn create playwright
# Or for pnpm
pnpm create playwright
When you run npm init playwright@latest -- --ct
it tries to install @playwright/experimental-ct-[react/vue/...]
package via npm even if you use yarn as a package manager. Ideally it should detect and respect the package manager. Less ideally, it should ask for it. Less ideally, it should check existing installation of the package and skip installation in that case. So that one can install the package themself and still use the other scaffolding help done by the npm init command.
Context:
System:
OS: Windows 10 10.0.19043
Memory: 8.11 GB / 15.94 GB
Binaries:
Node: 16.10.0 - L:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - L:\_npm\yarn.CMD
npm: 7.24.1 - L:\_npm\npm.CMD
Languages:
Bash: 4.4.23 - L:\Program Files\Git\usr\bin\bash.EXE
Code Snippet
Help us help you! Put down a short code snippet that illustrates your bug and
that we can run and debug locally. For example:
pm init playwright
Describe the bug
leege@studio MINGW64 /l/src/nta/nta-test (master)
$ npm init playwright
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
√ Do you want to use TypeScript or JavaScript? · TypeScript
√ Where to put your end-to-end tests? · .
√ Add a GitHub Actions workflow? (Y/n) · true
Initializing NPM project (npm init -y)…
Wrote to L:\src\nta\nta-test\package.json:
{
"name": "nta-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Installing Playwright Test (npm install --save-dev @playwright/test)…
added 208 packages, and audited 209 packages in 16s
20 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Downloading browsers (npx playwright install)…
'playwright' is not recognized as an internal or external command,
operable program or batch file.
Error: Command failed: npx playwright install
at checkExecSyncError (node:child_process:826:11)
at execSync (node:child_process:900:15)
at executeCommands (C:\Users\leege\AppData\Local\npm-cache\_npx\d40a10098bccdd29\node_modules\create-playwright\lib\index.js:1:85854)
at Generator.run (C:\Users\leege\AppData\Local\npm-cache\_npx\d40a10098bccdd29\node_modules\create-playwright\lib\index.js:1:80307)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async C:\Users\leege\AppData\Local\npm-cache\_npx\d40a10098bccdd29\node_modules\create-playwright\lib\index.js:1:79571 {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 14608,
stdout: null,
stderr: null
}
npm ERR! code 1
npm ERR! path L:\src\nta\nta-test
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c create-playwright
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\leege\AppData\Local\npm-cache\_logs\2022-02-24T08_58_52_040Z-debug.log
Please file your issues here.
npm init playwright
and npx create-playwright
uses the same cache (NPX cache) from my experiments. Docs say the same.
npx create-playwright -> old version
npm init playwright -> old version
adding @latest
fixed it then but did not invalidate the stable cache record. So the only way to workaround it is by adding @latest
.
Next step would be to better understand the cache policies.
Hi all.
I'm arguably on an old system but can not upgrade to a later macOS.
Because the latest supported OS on this hardware is macOS 10.13.6 High Sierra, I'm currently fixed on the following versions (+ indicates I'm able to use the latest version and can probably continue to upgrade for a while):
16.x
(npm 8.19.3)0.15.1
108+
109+
605.1.15
There is already a closed PR, microsoft/playwright#1941 (comment), with a work-around for npm init playwright@latest
failing on macOS 10.13.
I would like to contribute to a better Developer eXperience (DX) for us on old Apple hardware, if possible.
Below is my notes for getting Playwright to work on 10.13. Any of the sections could be turned into a PR, if desired by you. I don't see any guidelines for what is supported other than comments here and there.
npm init playwright@latest
Error: ERROR: Playwright does not support webkit on mac10.13
Error: Command failed: npx playwright install
at checkExecSyncError (node:child_process:861:11)
at execSync (node:child_process:932:15)
at executeCommands (/Volumes/mystuff/dotnet/.npm/_npx/d352e76cc6b4974c/node_modules/create-playwright/lib/index.js:4519:39)
at Generator.run (/Volumes/mystuff/dotnet/.npm/_npx/d352e76cc6b4974c/node_modules/create-playwright/lib/index.js:4660:5)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async /Volumes/mystuff/dotnet/.npm/_npx/d352e76cc6b4974c/node_modules/create-playwright/lib/index.js:4928:3 {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 2004,
stdout: null,
stderr: null
}
npm test
npm i && npm test
All of the tests fails.
1) [NPM] › integration.spec.ts:20:1 › should generate a project in the current directory =========
Error: expect(received).toBe(expected) // Object.is equality
Expected: 0
Received: 1
21 | test.slow();
22 | const { exitCode, dir, stdout } = await run([], { installGitHubActions: true, testDir: 'tests', language: 'TypeScript', installPlaywrightDependencies: false, installPlaywrightBrowsers: true });
> 23 | expect(exitCode).toBe(0);
The same error happens in all of the tests.
Since the test output does not say what why all of the tests failed, I added a stderr
property to type RunResult
and in integration.spec.ts I print to console.error
if exitCode
is not above 0.
I could then see that the tests expects yarn
and pnpm
to be globally installed. I don't know if it makes sense to add package managers to the devDependencies
for create-playwright but I'm assuming it does not.
A fix could be to just write that npm
, yarn
and pnpm
is required for the tests to run, in the README.
After installing yarn
2 and still failing all tests, I took a peek at what the macOS github action is using and it turns out to be yarn@1
. This should also be clear in the README.
The steps required, according to .github/workflows/.ci.yml, are the following:
npm i -g npm@8
npm i -g yarn@1
npm i -g pnpm@7
npm ci
npx playwright install-deps
npm run build
npx tsc --noEmit
npm test
Despite successfully doing the above steps, all of the tests still fails. Fortunately, with the stderr
property, I am now able to see which commands fails.
The first one being, npx playwright install
, which brings be back to my original issue, "Playwright does not support webkit on mac10.13".
Running the test with PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=true npm test
gives the same errors.
It seems that I can not get any further without looking into the source of microsoft/playwright...
I will update this issue with my findings :)
Related issues:
Context:
Describe the bug
Adding playwright to an existing project (or create a new one) is very simple thanks to create-playwright
.
pnpm init playwright@latest
The problem is that it assumes npm
and installs dependencies without asking first. When trying to add playwright to an existing project managed with pnpm
, the init results in an error.
It would be much better if create-playwright
added necessary dependencies to package.json
, but asked whether the developer wants to install them with npm
.
Can Playwright generate /playwright/index.[tj]sx
instead of /playwright/index.[tj]s
for the following tsx
frameworks?:
I think this would be better because tsx
can be returned since: https://github.com/microsoft/playwright/pull/18616/files#diff-aa90f1a2f6a8431f5441420bd16c0f0dff360678ffdbee761455e36f15aa0139R14
microsoft/playwright#18616
Please note that if this changes, the documentation will need to be updated as well:
https://playwright.dev/docs/test-components#step-1-install-playwright-test-for-components-for-your-respective-framework
When component testing argument --ct
is specified (see https://playwright.dev/docs/test-components#how-to-get-started), with create-playwright@next
(1.18.0-alpha-1638379596000) the following fails, but succeeds with create-playwright@latest
(1.17.116)
npm install create-react-app
npx create-react-app playwright-components-react
cd playwright-components-react
npm install --save-dev playwright@next @playwright/experimental-ct-react@next create-playwright@next
TEST_OPTIONS='{"language":"JavaScript","framework":"react","installPlaywrightDependencies":"true"}' npm init playwright@next -- --ct
cat package.json
...
Getting started with writing end-to-end tests with Playwright:
Initializing project in '--ct'
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:372:5)
at validateString (node:internal/validators:120:11)
at Object.join (node:path:1172:7)
at Generator._identifyChanges (/playwright-components-react/node_modules/create-playwright/lib/index.js:1:83384)
at Generator.run (/playwright-components-react/node_modules/create-playwright/lib/index.js:1:81655)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async /playwright-components-react/node_modules/create-playwright/lib/index.js:1:86459 {
code: 'ERR_INVALID_ARG_TYPE'
}
As a consequence package.json is missing "test-ct": "playwright test -c playwright-ct.config.js"
{
"name": "playwright-components-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@playwright/experimental-ct-react": "^1.23.0-alpha-jun-11-2022",
"create-playwright": "^1.18.0-alpha-1638379596000",
"playwright": "^1.23.0-alpha-jun-11-2022"
}
}
To reproduce, run (tested on Ubuntu) DOCKER_BUILDKIT=1 docker build -t playwright . --progress=plain --no-cache
# syntax=docker/dockerfile-upstream:1-labs
FROM node:16.15.0-bullseye-slim
# Usage
# https://github.com/moby/moby/issues/16058#issuecomment-881901519
# 1. DOCKER_BUILDKIT=1 docker build -t playwright . --progress=plain --no-cache
# 2. docker run --rm -it --name playwright playwright:latest bash
# Install playwrigth deps https://github.com/microsoft/playwright/issues/3167#issuecomment-1088152322
RUN <<-EORUN
cat <<'EOF' > /tmp/playwright-install-deps.sh
apt-get update
apt-get install -y wget
packages=(
"http://archive.ubuntu.com/ubuntu/pool/main/libj/libjpeg-turbo/libjpeg-turbo8_2.0.3-0ubuntu1_amd64.deb"
"http://archive.ubuntu.com/ubuntu/pool/main/i/icu/libicu66_66.1-2ubuntu2_amd64.deb"
"http://ftp.de.debian.org/debian/pool/main/e/enchant/libenchant1c2a_1.6.0-11.1+b1_amd64.deb"
"http://ftp.de.debian.org/debian/pool/non-free/f/fonts-ubuntu/fonts-ubuntu_0.83-4_all.deb"
"http://ftp.de.debian.org/debian/pool/non-free/f/fonts-ubuntu/ttf-ubuntu-font-family_0.83-4_all.deb"
)
for package in ${packages[@]}; do
wget -O /tmp/$(basename $package) $package
apt-get install -fy /tmp/$(basename $package)
done
rm -rf /tmp/*deb
rm -rf /var/lib/apt/lists/*
EOF
EORUN
RUN bash /tmp/playwright-install-deps.sh
RUN <<-EORUN
npm install create-react-app
npx create-react-app playwright-components-react
EORUN
RUN <<-EORUN
cd playwright-components-react
npm install --save-dev playwright@next @playwright/experimental-ct-react@next create-playwright@next
cat package.json
TEST_OPTIONS='{"language":"JavaScript","framework":"react","installPlaywrightDependencies":"true"}' npm init playwright@next -- --ct
cat package.json
EORUN
In the example test we need to change the second example and remove the assertion with toHaveURL
for
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
Reason for this is it is more realistic to check for a heading on page than it is to check for a URL and it also makes more sense for beginner material as the trace will always show the installation page which is no the case with the the URL.
Note that when changing and releasing a new version here we also have to update docs to reflect such changes so these need to be coordinated properly.
When i choose Vue, a Vue3 project is generated by default and i can't choose a framework version (Vue2/React17 for example).
Related to: microsoft/playwright#19814
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.