also see playwright-ct-react

Playwright Component Testing Vue Example

see test-components

Coverage Report

• step 1, install monocart-reporter

npm i monocart-reporter -D

• step 2, add monocart-reporter to playwright config

// 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

// 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

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) => {

        // 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];
            await addCoverageReport(coverageList, test.info());
        }

    }, {
        scope: 'test',
        auto: true
    }]
});

test('HelloWorld should work', async ({ mount, page }) => {
    const component = await mount(HelloWorld, {
        props: {
            msg: 'my message'
        }
    });
    await expect(component).toContainText('my message');
});

• step 4, write more tests and run test

npm run test

# The coverage report will be generated in your output dir: 

• step 5, Github action for Coveralls

      - name: Coveralls
        uses: coverallsapp/github-action@v2

Or Codecov

    - name: Codecov
        uses: codecov/codecov-action@v3

see static.yml

Preview Coverage Report

• https://cenfun.github.io/playwright-ct-vue/coverage/
• 
• 

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint