Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs(examples/components-vue/README.md): updated installation steps (#13866)

Browse source
This commit is contained in:
sand4rt 2022-05-02 18:00:51 +02:00 committed by GitHub
parent d87de8c52c
commit f6c55889c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
examples/components-vue/README.md
View file

@ -32,84 +32,14 @@ npm run test
npm init vue@latest npm init vue@latest
``` ```
- Install Playwright Text w/ component testing as dev dependencies. - Install Playwright Test with component testing as dev dependencies.
```sh ```sh
npm i --save-dev @playwright/test @playwright/experimental-ct-vue npm i --save-dev @playwright/test @playwright/experimental-ct-vue
``` ```
- `tests.js` file was added that registers all the components to be tested. - [playwright/index.html](playwright/index.html) file was added that defines theming for the components through importing [playwright/index.js](playwright/index.js) .
```js - [playwright.config.ts](playwright.config.ts) was added that executes `npm run dev` before running tests if it is not already running.
import register from '@playwright/experimental-ct-vue/register'
import Counter from './src/components/Counter.vue'
import DocumentationIcon from './src/components/icons/IconDocumentation.vue'
import HelloWorld from './src/components/HelloWorld.vue'
import NamedSlots from './src/components/NamedSlots.vue'
import TheWelcome from './src/components/TheWelcome.vue'
import WelcomeItem from './src/components/WelcomeItem.vue'
register({
Counter,
DocumentationIcon,
HelloWorld,
NamedSlots,
TheWelcome,
WelcomeItem,
})
```
- `tests.html` file was added that defines theming for the components and references `tests.js`.
```html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>@import '/src/assets/base.css';</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="/tests.js"></script>
</body>
</html>
```
- `playwright.config.ts` was added that executes `npm run dev` before running tests if it is not already running.
```js
import { PlaywrightTestConfig, devices } from '@playwright/test';
const config: PlaywrightTestConfig = {
testDir: 'src',
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
reporter: process.env.CI ? [
['html', { open: 'never' }],
] : [
['html', { open: 'on-failure' }]
],
webServer: {
url: 'http://localhost:3000/tests.html',
command: 'npm run dev',
reuseExistingServer: !process.env.CI,
},
use: {
baseURL: 'http://localhost:3000/tests.html',
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
};
export default config;
```
- A bunch of `.spec.ts` and `.spec.tsx` files were added to `src` that demonstrate Vue3 component testing with and without the use of JSX syntax. - A bunch of `.spec.ts` and `.spec.tsx` files were added to `src` that demonstrate Vue3 component testing with and without the use of JSX syntax.