Skip to content

Commit a4b3775

Browse files
committed
Fix feedback setup tutorial
1 parent a076c2e commit a4b3775

1 file changed

Lines changed: 29 additions & 4 deletions

File tree

‎tutorial/stage-1-setup/practical-playwright-setup.mdx‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,7 @@ Following the [Playwright documentation](https://playwright.dev/docs/intro#using
3434
pnpm create playwright
3535
```
3636

37-
Follow the wizard. You should now have a `playwright.config.ts` file, a `tests` directory, and also a `tests-examples` directory.
38-
You can remove the `tests-examples` directory, we won't be using it.
37+
Follow the wizard. You should now have a `playwright.config.ts` file and a `tests` directory.
3938

4039
### Modifying `playwright.config.ts` for our needs
4140

@@ -76,6 +75,10 @@ Let's check that this works by modifying the `example.spec.ts` test file in the
7675
- Modify the expectation to check for our page title `/Playwright Tutorial/`
7776
- Watch your test run `pnpm playwright test --debug`
7877

78+
<Aside type="caution">
79+
When you run Playwright in debug mode for the first time, the browser will open and appear frozen on `about:blank`. This is expected! You need to click the "step over" button in the Playwright Inspector window to start stepping through your test.
80+
</Aside>
81+
7982
You can watch your test step by step by using the "step over" button.
8083
<Image src={StepOverDebug} alt="Step over button in Playwrights inspector" width={600} />
8184

@@ -105,9 +108,18 @@ Today we will learn to use both kinds of set up approaches.
105108

106109
First let's make the test files for setup and teardown:
107110

111+
<Tabs>
112+
<TabItem label="Linux/macOS">
108113
```bash
109-
touch tests/setup.spec.ts && touch tests/teardown.spec.ts
114+
touch tests/setup.spec.ts tests/teardown.spec.ts
110115
```
116+
</TabItem>
117+
<TabItem label="Windows (PowerShell)">
118+
```powershell
119+
New-Item -ItemType File -Path tests/setup.spec.ts, tests/teardown.spec.ts
120+
```
121+
</TabItem>
122+
</Tabs>
111123

112124
For us to use project dependencies to declare our setup and teardown steps, we need to make more modifications to our `playwright.config.ts` file.
113125

@@ -287,9 +299,13 @@ Let's explore the alternative to creating users through the browser, which is to
287299
Let's make ourselves an internal API endpoint for our tests to use.
288300

289301
```bash
290-
git checkout stage-1-setup -- app/api/internal/user/route.ts
302+
git checkout origin/stage-1-setup -- app/api/internal/user/route.ts
291303
```
292304

305+
<Aside type="note">
306+
This step is only necessary if you're running tests against a local Next.js dev application. If you're testing against the remote Vercel deployment, this API endpoint is already available and you can skip this checkout command.
307+
</Aside>
308+
293309
This file contains a `POST` and `DELETE` endpoint for creating and deleting users.
294310

295311
```ts
@@ -329,9 +345,18 @@ export default defineConfig({
329345

330346
Then we need to create the `global-setup.ts` and `global-teardown.ts` files.
331347

348+
<Tabs>
349+
<TabItem label="Linux/macOS">
332350
```bash
333351
touch global-setup.ts global-teardown.ts
334352
```
353+
</TabItem>
354+
<TabItem label="Windows (PowerShell)">
355+
```powershell
356+
New-Item -ItemType File -Path global-setup.ts, global-teardown.ts
357+
```
358+
</TabItem>
359+
</Tabs>
335360

336361
Can you figure out what these scripts should contain?
337362

0 commit comments

Comments
 (0)