From 2e96c7eeb308fe7ef6eb12af3774ce9fe1b5b75e Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Thu, 5 May 2022 16:59:37 -0800 Subject: [PATCH] chore: update ct how-to (#13981) --- docs/src/test-components-js.md | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/docs/src/test-components-js.md b/docs/src/test-components-js.md index be88eb2f54..2f3f4f7e86 100644 --- a/docs/src/test-components-js.md +++ b/docs/src/test-components-js.md @@ -28,7 +28,7 @@ test('event should work', async ({ mount }) => { // Assert that respective events have been fired. expect(clicked).toBeTruthy(); -}) +}); ``` ## How to get started @@ -38,13 +38,17 @@ Adding Playwright Test to an existing React, Vue or Svelte project is easy. Belo ### Step 1: Install Playwright Test for components for your respective framework ```sh -npm i @playwright/test -npm i @playwright/experimental-ct-react -# npm i @playwright/experimental-ct-vue -# npm i @playwright/experimental-ct-svelte +npm init playwright@latest --ct ``` -### Step 2: create `playwright/index.html` +This step creates several files in your workspace: + +#### `playwright/index.html` + +This file defines an html file that will be used to render components during testing. +It must contain element with `id="root"`, that's where components are mounted. It must +also link the script called `playwright/index.[tj]s`. + ```html @@ -54,12 +58,20 @@ npm i @playwright/experimental-ct-react ``` -### Step 3: create `playwright/index.ts` +#### `playwright/index.ts` + +You can include stylesheets, apply theme and inject code into the page where +component is mounted using this script. It can be either `.js` or `.ts` file. + ```js // Apply theme here, add anything your component needs at runtime here. ``` -### Create a test `src/App.spec.tsx` +#### `playwright/types.d.ts` + +This file makes sure `mount` fixture is typed in your tests. + +### Step 2. Create a test file `src/App.spec.tsx` ```js import { test, expect } from '@playwright/test'; @@ -73,7 +85,7 @@ test('should work', async ({ mount }) => { }); ``` -### Run the tests +### Step 3. Run the tests ```sh npx playwright test