{"id":15434293,"url":"https://github.com/cenfun/playwright-ct-vue","last_synced_at":"2025-04-19T18:09:03.919Z","repository":{"id":166464617,"uuid":"641939193","full_name":"cenfun/playwright-ct-vue","owner":"cenfun","description":"playwright-ct-vue","archived":false,"fork":false,"pushed_at":"2024-10-10T13:46:03.000Z","size":951,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-18T08:39:11.178Z","etag":null,"topics":["component","coverage-report","ct","monocart-reporter","playwright","testing","vue"],"latest_commit_sha":null,"homepage":"https://cenfun.github.io/playwright-ct-vue/coverage/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cenfun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-17T13:32:15.000Z","updated_at":"2024-10-10T13:46:08.000Z","dependencies_parsed_at":"2024-01-25T12:27:34.477Z","dependency_job_id":"dde61107-0298-4688-9663-c30727a695fe","html_url":"https://github.com/cenfun/playwright-ct-vue","commit_stats":{"total_commits":47,"total_committers":2,"mean_commits":23.5,"dds":"0.021276595744680882","last_synced_commit":"cf561c75ba52779e02cb4cee971ed81ba64678f2"},"previous_names":["cenfun/playwright-ct-vue"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cenfun%2Fplaywright-ct-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cenfun%2Fplaywright-ct-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cenfun%2Fplaywright-ct-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cenfun%2Fplaywright-ct-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cenfun","download_url":"https://codeload.github.com/cenfun/playwright-ct-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249758652,"owners_count":21321569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","coverage-report","ct","monocart-reporter","playwright","testing","vue"],"created_at":"2024-10-01T18:38:41.358Z","updated_at":"2025-04-19T18:09:03.895Z","avatar_url":"https://github.com/cenfun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e also see [playwright-ct-react](https://github.com/cenfun/playwright-ct-react)\n\n# Playwright Component Testing Vue Example \n\n[![Coverage Status](https://coveralls.io/repos/github/cenfun/playwright-ct-vue/badge.svg?branch=main)](https://coveralls.io/github/cenfun/playwright-ct-vue?branch=main)\n[![codecov](https://codecov.io/gh/cenfun/playwright-ct-vue/branch/main/graph/badge.svg?token=D5LIE37F1K)](https://codecov.io/gh/cenfun/playwright-ct-vue)\n\nsee [test-components](https://playwright.dev/docs/test-components)\n\n## Coverage Report\n- step 1, install monocart-reporter\n```sh\nnpm i monocart-reporter -D\n```\n- step 2, add monocart-reporter to playwright config\n```js\n// playwright-ct.config.js\nconst { defineConfig, devices } = require('@playwright/experimental-ct-vue');\nmodule.exports = defineConfig({\n    testDir: './tests',\n    reporter: [\n        ['list'],\n        ['monocart-reporter', {\n            name: 'Playwright CT Vue Report',\n            outputFile: 'docs/index.html',\n            coverage: {\n                entryFilter: (entry) =\u003e true,\n                sourceFilter: (sourcePath) =\u003e sourcePath.search(/src\\//) !== -1,\n                lcov: true\n            }\n        }]\n    ],\n});\n```\n- step 3, collect coverage data\n\nCollect coverage with playwright [Automatic fixtures](https://playwright.dev/docs/test-fixtures#automatic-fixtures)\n```js\n// fixtures.js\nimport { test as ctBase, expect } from '@playwright/experimental-ct-vue';\nimport { addCoverageReport } from 'monocart-reporter';\n\nconst test = ctBase.extend({\n    autoTestFixture: [async ({ page }, use) =\u003e {\n\n        // console.log('autoTestFixture setup...');\n        // coverage API is chromium only\n        if (test.info().project.name === 'chromium') {\n            await Promise.all([\n                page.coverage.startJSCoverage({\n                    resetOnNavigation: false\n                }),\n                page.coverage.startCSSCoverage({\n                    resetOnNavigation: false\n                })\n            ]);\n        }\n\n        await use('autoTestFixture');\n\n        // console.log('autoTestFixture teardown...');\n        if (test.info().project.name === 'chromium') {\n            const [jsCoverage, cssCoverage] = await Promise.all([\n                page.coverage.stopJSCoverage(),\n                page.coverage.stopCSSCoverage()\n            ]);\n            const coverageList = [... jsCoverage, ... cssCoverage];\n            console.log(coverageList.map((item) =\u003e item.url));\n            await addCoverageReport(coverageList, test.info());\n        }\n\n    }, {\n        scope: 'test',\n        auto: true\n    }]\n});\n\nexport { test, expect };\n\n```\n\n```js\n// App.spec.js\nimport { test, expect } from './fixtures.js';\n\nimport App from '../src/App.vue';\n\ntest('App should work', async ({ mount }) =\u003e {\n    const component = await mount(App);\n    await expect(component).toContainText('Vite + Vue');\n});\n\n```\n\n- step 4, write more tests and run test\n```sh\nnpm run test\n\n# The coverage report will be generated in your output dir: \n```\n\n- step 5, Github action for Codecov\n```sh\n    - name: Codecov\n        uses: codecov/codecov-action@v3\n```\nSee [static.yml](/.github/workflows/static.yml)\n\n## Preview Coverage Report\n- https://cenfun.github.io/playwright-ct-vue/coverage/\n- [![Coverage Status](https://coveralls.io/repos/github/cenfun/playwright-ct-vue/badge.svg?branch=main)](https://coveralls.io/github/cenfun/playwright-ct-vue?branch=main)\n- [![codecov](https://codecov.io/gh/cenfun/playwright-ct-vue/branch/main/graph/badge.svg?token=D5LIE37F1K)](https://codecov.io/gh/cenfun/playwright-ct-vue)\n\n ![](https://codecov.io/gh/cenfun/playwright-ct-vue/branch/main/graphs/tree.svg?token=D5LIE37F1K)\n\n\n## Recommended IDE Setup\n\n[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).\n\n## Customize configuration\n\nSee [Vite Configuration Reference](https://vitejs.dev/config/).\n\n## Project Setup\n\n```sh\nnpm install\n```\n\n### Compile and Hot-Reload for Development\n\n```sh\nnpm run dev\n```\n\n### Compile and Minify for Production\n\n```sh\nnpm run build\n```\n\n### Lint with [ESLint](https://eslint.org/)\n\n```sh\nnpm run lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcenfun%2Fplaywright-ct-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcenfun%2Fplaywright-ct-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcenfun%2Fplaywright-ct-vue/lists"}