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.

Can Playwright generate /playwright/index.[tj]sx instead of /playwright/index.[tj]s for the following tsx frameworks?:

• Solid
• React

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

Please file your issues here.

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.

microsoft/playwright#17535 (comment)

Context:

• create-playwright 1.17.110

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.

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:

• Playwright Version: [what Playwright version do you use?] latest via npx init playwright
• Operating System: [e.g. Windows, Linux or Mac] Win 10 64-bit
• Node.js version: [e.g. 12.22, 14.6] 7.24.1
• Browser: [e.g. All, Chromium, Firefox, WebKit] via npx init playwright
• Extra: [any specific details about your environment] git bash 4.4.23

  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

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

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

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):

1. nodejs: 16.x (npm 8.19.3)
2. Corepack: 0.15.1
3. Firefox: 108+
4. Chromium: 109+
5. AppleWebKit: 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.

ERROR: Playwright does not support webkit on mac10.13

Steps to reproduce

npm init playwright@latest

Result

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
}

create-playwright npm test

Steps to reproduce

npm i && npm test

Result

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.

Possible solution

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:

1. npm i -g npm@8
2. npm i -g yarn@1
3. npm i -g pnpm@7
4. npm ci
5. npx playwright install-deps
6. npm run build
7. npx tsc --noEmit
8. 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:

• 1535
• 1941