Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cenfun/playwright-ct-vue
playwright-ct-vue
https://github.com/cenfun/playwright-ct-vue
component coverage-report ct monocart-reporter playwright testing vue
Last synced: 3 months ago
JSON representation
playwright-ct-vue
- Host: GitHub
- URL: https://github.com/cenfun/playwright-ct-vue
- Owner: cenfun
- License: mit
- Created: 2023-05-17T13:32:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-14T13:26:01.000Z (6 months ago)
- Last Synced: 2024-10-07T15:23:02.874Z (4 months ago)
- Topics: component, coverage-report, ct, monocart-reporter, playwright, testing, vue
- Language: JavaScript
- Homepage: https://cenfun.github.io/playwright-ct-vue/coverage/
- Size: 928 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> also see [playwright-ct-react](https://github.com/cenfun/playwright-ct-react)
# Playwright Component Testing Vue Example
[](https://coveralls.io/github/cenfun/playwright-ct-vue?branch=main)
[](https://codecov.io/gh/cenfun/playwright-ct-vue)
see [test-components](https://playwright.dev/docs/test-components)
## Coverage Report
- step 1, install monocart-reporter
```sh
npm i monocart-reporter -D
```
- step 2, add monocart-reporter to playwright config
```js
// playwright-ct.config.js
const { defineConfig, devices } = require('@playwright/experimental-ct-vue');
module.exports = defineConfig({
testDir: './tests',
reporter: [
['list'],
['monocart-reporter', {
name: 'Playwright CT Vue Report',
outputFile: 'docs/index.html',
coverage: {
entryFilter: (entry) => true,
sourceFilter: (sourcePath) => sourcePath.search(/src\//) !== -1,
lcov: true
}
}]
],
});
```
- step 3, collect coverage data
Collect coverage with playwright [Automatic fixtures](https://playwright.dev/docs/test-fixtures#automatic-fixtures)
```js
// fixtures.js
import { test as ctBase, expect } from '@playwright/experimental-ct-vue';
import { addCoverageReport } from 'monocart-reporter';
const test = ctBase.extend({
autoTestFixture: [async ({ page }, use) => {
// console.log('autoTestFixture setup...');
// coverage API is chromium only
if (test.info().project.name === 'chromium') {
await Promise.all([
page.coverage.startJSCoverage({
resetOnNavigation: false
}),
page.coverage.startCSSCoverage({
resetOnNavigation: false
})
]);
}
await use('autoTestFixture');
// console.log('autoTestFixture teardown...');
if (test.info().project.name === 'chromium') {
const [jsCoverage, cssCoverage] = await Promise.all([
page.coverage.stopJSCoverage(),
page.coverage.stopCSSCoverage()
]);
const coverageList = [... jsCoverage, ... cssCoverage];
console.log(coverageList.map((item) => item.url));
await addCoverageReport(coverageList, test.info());
}
}, {
scope: 'test',
auto: true
}]
});
export { test, expect };
```
```js
// App.spec.js
import { test, expect } from './fixtures.js';
import App from '../src/App.vue';
test('App should work', async ({ mount }) => {
const component = await mount(App);
await expect(component).toContainText('Vite + Vue');
});
```
- step 4, write more tests and run test
```sh
npm run test
# The coverage report will be generated in your output dir:
```
- step 5, Github action for Codecov
```sh
- name: Codecov
uses: codecov/codecov-action@v3
```
See [static.yml](/.github/workflows/static.yml)
## Preview Coverage Report
- https://cenfun.github.io/playwright-ct-vue/coverage/
- [](https://coveralls.io/github/cenfun/playwright-ct-vue?branch=main)
- [](https://codecov.io/gh/cenfun/playwright-ct-vue)
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```