Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Add instructions for bun/bunx #26454

Closed
wants to merge 5 commits into from
Closed

docs: Add instructions for bun/bunx #26454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5e5d897
docs: Add instructions for bun/bunx
colinhacks Aug 14, 2023
91bb154
Undo autoformatting
colinhacks Aug 14, 2023
de65a8d
Undo autoformatting
colinhacks Aug 14, 2023
4e8be84
Undo autoformatting
colinhacks Aug 14, 2023
87c66a9
Remove unnecessary changes
colinhacks Aug 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion docs/src/intro-js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ Get started by installing Playwright using npm or yarn. Alternatively you can al
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
{label: 'pnpm', value: 'pnpm'}
{label: 'pnpm', value: 'pnpm'},
{label: 'bun', value: 'bun'}
]
}>
<TabItem value="npm">
Expand All @@ -47,6 +48,14 @@ yarn create playwright
pnpm create playwright
```

</TabItem>

<TabItem value="bun">

```bash
bunx create-playwright
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bunx was not available, so I tried with bun x which wasn't working for me:

image

Copy link
Author

@colinhacks colinhacks Aug 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies, how are you running this? Are you on a recent version of Bun? If bunx isn't available it's possibly quite old.

I see a different error (which I can also replicate with npx).

Note that bunx respects the shebang line in create-playwright so it should behave identically to npx.

$ bunx create-playwright
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Where to put your end-to-end tests? · playwright
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
Installing Playwright Test (npm install --save-dev @playwright/test)…
npm ERR! Invalid Version: 

npm ERR! A complete log of this run can be found in: /Users/colinmcd94/.npm/_logs/2023-08-15T00_10_16_493Z-debug-0.log
Error: Command failed: npm install --save-dev @playwright/test
    at checkExecSyncError (node:child_process:887:11)
    at execSync (node:child_process:959:15)
    at executeCommands (/private/tmp/create-playwright@latest--bunx/node_modules/create-playwright/lib/index.js:4519:39)
    at Generator.run (/private/tmp/create-playwright@latest--bunx/node_modules/create-playwright/lib/index.js:4679:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /private/tmp/create-playwright@latest--bunx/node_modules/create-playwright/lib/index.js:4952:3 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 12934,
  stdout: null,
  stderr: null
}
error: "create-playwright" exited with code 1 (SIGHUP)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used the latest bun available on bun.sh 0.7.3

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm able to replicate your error when I do bunx --bun create-playwright which runs the create-playwright CLI with the Bun runtime. Opened an issue here: oven-sh/bun#4153

Though without the --bun flag this command should respect the shebang line and run the CLI with Node.js. Maybe you have a global bunfig.toml that changes this behavior?

I'm able to run bunx create-playwright successfully on my machine now...I think that "Invalid Version" error was a transient npm registry issue.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was a fresh installation from bun.sh on GitHub Codespaces, so no global bunfig.toml was present.

Generally speaking we should try to run our testsuite "npm run ctest" with bun and see how many tests pass/are failing.

```

</TabItem>
</Tabs>

Expand Down
23 changes: 16 additions & 7 deletions docs/src/test-components-js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ Adding Playwright Test to an existing project is easy. Below are the steps to en
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
{label: 'pnpm', value: 'pnpm'},
{label: 'bun', value: 'bun'},
]
}>
<TabItem value="npm">
Expand All @@ -72,8 +73,16 @@ yarn create playwright --ct
pnpm dlx create-playwright --ct
```

</TabItem>

</TabItem>

<TabItem value="bun">

```bash
bunx create-playwright --ct
```

</TabItem>

</Tabs>

This step creates several files in your workspace:
Expand Down Expand Up @@ -150,7 +159,7 @@ declare module '*.vue';
```

</TabItem>

<TabItem value="svelte">

```js
Expand Down Expand Up @@ -314,7 +323,7 @@ This includes any config that needs to be run before or after mounting the compo
</TabItem>

<TabItem value="vue2">

```js title="playwright/index.ts"
import { beforeMount, afterMount } from '@playwright/experimental-ct-vue2/hooks';
import Router from 'vue-router';
Expand Down Expand Up @@ -378,7 +387,7 @@ import { defineConfig } from '@playwright/experimental-ct-react';

export default defineConfig({
use: {
ctViteConfig: {
ctViteConfig: {
// ...
},
},
Expand Down Expand Up @@ -439,7 +448,7 @@ test('should work', async ({ mount }) => {
```

</TabItem>

<TabItem value="svelte">

```js
Expand Down Expand Up @@ -597,7 +606,7 @@ import Store from './Store.vue';
test('override initialState ', async ({ mount }) => {
const component = await mount<HooksConfig>(Store, {
hooksConfig: {
store: { name: 'override initialState' }
store: { name: 'override initialState' }
}
});
await expect(component).toContainText('override initialState');
Expand Down
4 changes: 4 additions & 0 deletions packages/playwright-core/src/cli/cli.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ function printPlaywrightTestError(command: string) {
console.error(`Please install @playwright/test package before running "pnpm exec playwright ${command}"`);
console.error(` pnpm remove ${packages.join(' ')}`);
console.error(' pnpm add -D @playwright/test');
} else if (packageManager === 'bun') {
console.error(`Please install @playwright/test package before running "bunx playwright ${command}"`);
console.error(` bun remove ${packages.join(' ')}`);
console.error(' bun add -D @playwright/test');
} else {
console.error(`Please install @playwright/test package before running "npx playwright ${command}"`);
console.error(` npm uninstall ${packages.join(' ')}`);
Expand Down
2 changes: 2 additions & 0 deletions packages/playwright-core/src/utils/env.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,7 @@ export function getPackageManager() {
return 'yarn';
if (env.includes('pnpm'))
return 'pnpm';
if (env.includes('bun'))
return 'bun';
return 'npm';
}