Skip to content

Testing Vue Apps

Vue applications can be tested with CodeceptJS web helpers and semantic locators.

Use this page for Vue-specific locator patterns. For general setup and test workflow, start with Quickstart, Web Basics, and helper docs for Playwright, WebDriver, or Puppeteer.

Section titled “Recommended Setup”

For new projects on 4.x, use Playwright by default:

Terminal window
npx create-codeceptjs .

Or initialize in an existing project:

Terminal window
npx codeceptjs init

Then run tests:

Terminal window
npx codeceptjs run

Vue Locators

Section titled “Vue Locators”

CodeceptJS supports a strict vue locator object:

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

Examples:

I.click({ vue: 'Tab', props: { title: 'Profile' } });
I.seeElement({ vue: 'UserCard', props: { state: 'active' } });

Vue + ARIA/Semantic Locators

Section titled “Vue + ARIA/Semantic Locators”

Prefer accessible locators first (aria, labels, text), then use vue locator when needed:

I.click({ aria: 'Save profile' });
I.fillField({ aria: 'Email' }, 'user@example.com');
I.click({ vue: 'SubmitButton', props: { variant: 'primary' } });

Notes

Section titled “Notes”
  • With Playwright, Vue locators work through Playwright Vue Locator.
  • Keep component names meaningful and avoid excessive minification in test builds when you rely on component-based locators.
Section titled “Related”