Playwright For Vue.js Frontend Applications

 

Playwright Automation Testing for Vue.js Websites

In this blogpost, we will discuss automation testing with Playwright on Vue.js Frontend.   

We have taken Snipcart website which is built on Vue.js JavaScript Framework.

I’ll put the post in two points:

•  Test automation framework with Playwright

•  Integrate automation tests with CI 

Test automation framework with Playwright: 

Overview: 

I have used JavaScript for developing the automation test. 

To start with, the locators are the keys for Vue.js, React.js and Angular website test automation frameworks.

As we know that Vue.js is a JavaScript frontend web framework which is more popular for building E-commerce websites now a days.

This is where Playwright comes into picture and support JavaScript Frontends built on Vue.js, React.js or Angular JavaScript Frontends.

Coming back to our point on locators, Basically, the advantage with playwright is you can grab the locators with "text", "css", "id", "data-test-id", "xpath". 

No matter which locator you use, Playwright will consider all of these locators into one locator like below which is a benefit in terms of code readability.

const element = this.page.locator(selector);

Your selector can be anyone from these - xpath, id, css, text, data-test-id.

I've written some sample locators below from the website.

export const email = '#Email'

export const password = '#Password'

export const loginButton = "button[type='submit']"

export const logo = 'a.logo'

export const username = 'text=Test Email Automation'

export const onboardingSection = '#onboarding'

export const profileButton = '#show-account-menu'

export const logOutButton = "//a[@href='/account/logout']"

Once, you have your locators, you are good to go with designing the test automation framework. 

The framework using page object design pattern will be the same for Frontends built using React.js and Angular as well.

The page classes and tests remain the same across all the React.js, Vue.js and Angular applications.

Desigining of Pages: The pages are designed using page classes with extends keyword. This will be common for React.js, Vue.js and Angular applications.

import BasePage from './basePage'

import fs from 'fs'

import * as loginPageObjects from '../pageobjects/loginPage'

const testData = JSON.parse(fs.readFileSync(`./data/users.json`, `utf-8`))

class LoginPage extends BasePage {

constructor(page) {

super(page)

}

async openApp() {

await super.open()

return await super.waitForPageLoad()

}

async loginPageLogoVisible() {

return await this.isElementVisible(

loginPageObjects.logo,

testData.notVisibleText

)

}

async login() {

await this.isElementVisible(loginPageObjects.email, testData.notVisibleText)

await this.waitAndFill(loginPageObjects.email, testData.emailTxt)

await this.isElementVisible(

loginPageObjects.password,

testData.notVisibleText

)

await this.waitAndFill(loginPageObjects.password, testData.passwordTxt)

await this.isElementEnabled(

loginPageObjects.loginButton,

testData.notEnabledText

)

await this.waitAndClick(loginPageObjects.loginButton)

}

}

export default LoginPage

The test is a cross browser test  runs parallely on 4 browsers : Chrome, Safari, Edge and Firefox and 2 Devices : Android Pixel and iOS iPhone 13.

This is another good feature of playwright where parallelisation is free by default.

Playwright Test Report:

After running the test, you can see the test report like this :

Integrate automation tests with CI: 

I have integrated the automation tests with Bitbucket CI. However, you can use any other CI tools like Jenkins, GitLab etc...

Basically, Create a file with name "bitbucket-pipelines.yml" yaml file in your VS code in the root folder.

We are running  the "Login test" now in headless mode parallely on Bitbucket CI on browsers "Chrome", "Edge", "Safari", "Firefox" and "Android and iOS mobile view".

image: node:10.15.0

pipelines:

default:

- step:

name: Playwright-Test-Automation

image: mcr.microsoft.com/playwright:v1.38.0-jammy

script:

- npm install

- npx playwright install chrome

- npx playwright install msedge

- npx playwright install

- npm run test

Then, On Bitbucket --->

Voila......!

We have now run same test on 4 browsers and 2 devices parallely. Good Cross Browser testing :)!

Link to BitBucket Repo: BitBucket Repo

Link to Bitbucket pipelines: Pipelines

Link to GitHub Repo: GitHub

Finally, We have done some cross browser parallel automation testing both locally and on CI using playwright on Vue.JS Frontend.

Happy Automation Testing Guys :) !