From cf561c75ba52779e02cb4cee971ed81ba64678f2 Mon Sep 17 00:00:00 2001
From: cenfun <cenfun@gmail.com>
Date: Wed, 14 Aug 2024 21:25:56 +0800
Subject: [PATCH] update README

---
 README.md | 80 +++++++++++++------------------------------------------
 1 file changed, 19 insertions(+), 61 deletions(-)

diff --git a/README.md b/README.md
index f0d8d45..8a94b47 100644
--- a/README.md
+++ b/README.md
@@ -33,57 +33,13 @@ module.exports = defineConfig({
 });
 ```
 - step 3, collect coverage data
-```js
-// tests/app.spec.js
-import { test, expect } from '@playwright/experimental-ct-vue';
-import { addCoverageReport } from 'monocart-reporter';
-
-import App from '../src/App.vue';
 
-test.use({
-    viewport: {
-        width: 500, height: 500
-    }
-});
-
-test.beforeAll(async ({ page }) => {
-    // coverage API is chromium only
-    if (test.info().project.name === 'chromium') {
-        await Promise.all([
-            page.coverage.startJSCoverage({
-                resetOnNavigation: false
-            }),
-            page.coverage.startCSSCoverage({
-                resetOnNavigation: false
-            })
-        ]);
-    }
-
-});
-
-test.afterAll(async ({ page }) => {
-    if (test.info().project.name === 'chromium') {
-        const [jsCoverage, cssCoverage] = await Promise.all([
-            page.coverage.stopJSCoverage(),
-            page.coverage.stopCSSCoverage()
-        ]);
-        const coverageList = [... jsCoverage, ... cssCoverage];
-        await addCoverageReport(coverageList, test.info());
-    }
-});
-
-test('should work', async ({ mount }) => {
-    const component = await mount(App);
-    await expect(component).toContainText('Vite + Vue');
-});
-```
-You can also replace beforeAll and afterAll with [Automatic fixtures](https://playwright.dev/docs/test-fixtures#automatic-fixtures)
+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';
 
-import HelloWorld from '../../src/components/HelloWorld.vue';
-
 const test = ctBase.extend({
     autoTestFixture: [async ({ page }, use) => {
 
@@ -109,6 +65,7 @@ const test = ctBase.extend({
                 page.coverage.stopCSSCoverage()
             ]);
             const coverageList = [... jsCoverage, ... cssCoverage];
+            console.log(coverageList.map((item) => item.url));
             await addCoverageReport(coverageList, test.info());
         }
 
@@ -118,14 +75,21 @@ const test = ctBase.extend({
     }]
 });
 
-test('HelloWorld should work', async ({ mount, page }) => {
-    const component = await mount(HelloWorld, {
-        props: {
-            msg: 'my message'
-        }
-    });
-    await expect(component).toContainText('my message');
+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
@@ -135,18 +99,12 @@ npm run test
 # The coverage report will be generated in your output dir: 
 ```
 
-- step 5, Github action for Coveralls
-```sh
-      - name: Coveralls
-        uses: coverallsapp/github-action@v2
-```
-Or Codecov
+- step 5, Github action for Codecov
 ```sh
     - name: Codecov
         uses: codecov/codecov-action@v3
 ```
-
-see [static.yml](/.github/workflows/static.yml)
+See [static.yml](/.github/workflows/static.yml)
 
 ## Preview Coverage Report
 - https://cenfun.github.io/playwright-ct-vue/coverage/