e2e codeceptjs & playwright plugin for vue-cli
npm install vue-cli-plugin-codeceptjs-playwrightHey, how about some end 2 end testing for your Vue apps? š¤
Let's do it together! Vue, CodeceptJS & Playwright and myself. š¤
Browser testing would be more fun. Just see it! š
``js`
I.amOnPage('/');
I.click('My Component Button');
I.see('My Component');
I.say('I am happy!');
// that's right, this is a valid test!
Requirements:
* NodeJS >= 8.9.1
* NPM / Yarn
* Vue CLI installed globally
Note:
* CodeceptJS requires Node.js version 8.9.1+ or later.
* To use the parallel test execution, requiring Node.js version 11.7 or later.
``
npm i vue-cli-plugin-codeceptjs-playwright --save-dev
This will install CodeceptJS, CodeceptUI & Playwright.
To add CodeceptJS to your project, invoke the installer:
``
vue invoke vue-cli-plugin-codeceptjs-playwright
> You will be asked about installing a demo component. If you start a fresh project it is recommended to agree and install a demo component, so you could see tests passing.
We added npm scripts:
* test:e2e - will execute tests with an opened browser . If you installed test component, and started a test server, running this command will show you a browser window passed test.--headless
* Use option to run browser with headless mode--serve
* Use option to start a dev server before tests
Examples:
``
npm run test:e2e
npm run test:e2e -- --headless
npm run test:e2e -- --serve
> This command is a wrapper for codecept run --steps. You can use the Run arguments and options here.
* test:e2e:parallel - will execute tests headlessly in parallel processes (workers). By default, runs tests in 2 workers.--serve
* Use an argument to set number of workers
* Use option to start dev server before running
Examples:
``
npm run test:e2e:parallel
npm run test:e2e:parallel -- 3
npm run test:e2e:parallel -- 3 --serve
> This command is a wrapper for codecept run-workers 2. You can use the Run arguments and options here.
* test:e2e:open - this opens interactive web test runner. So you could see, review & run your tests from a browser.

``
npm run test:e2e:open
Generator has created these files:
`js`
codecept.conf.js š codeceptjs config
jsconfig.json š enabling type definitons
tests
āāā e2e
āĀ Ā āāā app_test.js š demo test, edit it!
āĀ Ā āāā output š temp directory for screenshots, reports, etc
āĀ Ā āāā support
āĀ Ā āāā steps_file.js š common steps
āāā steps.d.ts š type definitions
If you agreed to create a demo component, you will also see TestMe component in src/components folder.
* Open tests/e2e/app_js` and see the demo test
* Execute a test & use an interactive pause to see how CodeceptJS works
* Learn CodeceptJS basics
* Learn how to write CodeceptJS tests with Puppeteer
* See full reference for CodeceptJS Puppeteer Helper
* Ask your questions in Slack & Forum
Testing is simple & fun, enjoy it!
With ⤠CodeceptJS Team