# vue-cli-plugin-e2e-codeceptjs

Hey, how about some end 2 end testing for your Vue apps? πŸ€”

Let's do it together! Vue, me, CodeceptJS (opens new window) & Puppeteer (opens new window). πŸ€—

Browser testing was never that simple. Just see it! 😍

I.click('My Component Button');
I.see('My Component');
I.say('I am happy!');
// that's right, this is a valid test!

# How to try it?


  • NodeJS >= 8.9
  • NPM / Yarn
  • Vue CLI installed globally
npm i vue-cli-plugin-codeceptjs-puppeteer --save-dev

This will install CodeceptJS, CodeceptUI & Puppeteer with Chrome browser.

To add CodeceptJS to your project invoke installer:

vue invoke vue-cli-plugin-codeceptjs-puppeteer

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.

# Running Tests

We added npm scripts:

  • test:e2e - will execute tests with browser opened. If you installed test component, and started a test server, running this command will show you a brower window passed test.
    • Use --headless option to run browser headlessly
    • Use --serve option to start a dev server before tests


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


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

# Directory Structure

Generator has created these files:

codecept.conf.js          πŸ‘ˆ codeceptjs config
jsconfig.json             πŸ‘ˆ enabling type definitons
β”œβ”€β”€ 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.

# Locators

For Vue apps a special vue locator is available. It allows to select an element by its component name, and props.

{ vue: 'MyComponent' }
{ vue: 'Button', props: { title: 'Click Me' }}

With Playwright, you can use Vue locators in any method where locator is required:

I.click({ vue: 'Tab', props: { title: 'Click Me!' }});
I.seeElement({ vue: 't', props: { title: 'Clicked' }});

To find Vue element names and props in a tree use Vue DevTools (opens new window) extension.

Turn off minification for application builds otherwise component names will be uglified as well

Vue locators work via Playwright Vue Locator (opens new window).

# How to write tests?

# Enjoy testing!

Testing is simple & fun, enjoy it!

With ❀ CodeceptJS Team (opens new window)