yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update ct how-to (#13981)

Browse Source
This commit is contained in:
Pavel Feldman 2022-05-05 16:59:37 -08:00 committed by GitHub
parent f5e2171c80
commit 2e96c7eeb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/src/test-components-js.md
View File

@ -28,7 +28,7 @@ test('event should work', async ({ mount }) => {
// Assert that respective events have been fired. // Assert that respective events have been fired.
expect(clicked).toBeTruthy(); expect(clicked).toBeTruthy();
}) });
``` ```
## How to get started ## 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 ### Step 1: Install Playwright Test for components for your respective framework
```sh ```sh
npm i @playwright/test npm init playwright@latest --ct
npm i @playwright/experimental-ct-react
# npm i @playwright/experimental-ct-vue
# npm i @playwright/experimental-ct-svelte
``` ```
### 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 ```html
<html lang="en"> <html lang="en">
<body> <body>
@ -54,12 +58,20 @@ npm i @playwright/experimental-ct-react
</html> </html>
``` ```
### 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 ```js
// Apply theme here, add anything your component needs at runtime here. // 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 ```js
import { test, expect } from '@playwright/test'; import { test, expect } from '@playwright/test';
@ -73,7 +85,7 @@ test('should work', async ({ mount }) => {
}); });
``` ```
### Run the tests ### Step 3. Run the tests
```sh ```sh
npx playwright test npx playwright test