Hey, 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! ๐
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 >= 14.* as required by playwright
- 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.
- NodeJS >= 14.* as required by playwright
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.- Use
--headless
option to run browser with headless mode - Use
--serve
option to start a dev server before tests
- Use
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.- Use an argument to set number of workers
- Use
--serve
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:
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