Playwright For Salesforce Frontend Applications

 

Playwright Automation Testing for Salesforce Websites

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

We have taken Salesforce Chatter application which is built on salesforce.

What is Salesforce?

Salesforce is a company that makes cloud-based software designed to help businesses find more prospects, close more deals, and wow customers with amazing service. It helps teams work better together. Businesses may use a single Customer 360 app or a combination of many. By improving team communications and productivity, businesses will benefit from it.

One of the reasons that Salesforce is so popular is that it is packed with features like no other CRM software. Features such as contact management, workflow creation, task management, opportunity tracking, collaboration tools, customer engagement tools, analytics and an intuitive, mobile-ready dashboard.

In a nutshell, Salesforce is a popular CRM(Customer Relationship Management) tool for support, sales and marketing teams worldwide. Salesforce services allow businesses to use cloud technology to better connect with partners, customers, and potential customers.

What is Lightning in Salesforce?

Lightning (Salesforce Lightning) is a component-based framework for app development from salesfore that is designed to simplify processes for business users, who typically do not have programming experience.

Lightning comprises the collection of tools and technologies behind a significant upgrade to the Salesforce1 Platform (now known as App Cloud), the company's mobile app development platform.

Lightning features:

• Experience, a graphical user interface (GUI) that is optimized for speed.
• Lightning App Builder, which provides drag and drop capacities to facilitate app creation and customisation.
• Lightning Component Framework, which includes tools and extensions that enable the development of reusable components and standalone apps and customisation of the Salesforce1 Mobile App.
• AppExchange for Components, which makes over 50 partner components available in the App Builder.
• Design System, which offers style guides and user experience (UX) best practices for app development.
• Lightning Connect, an integration tool that makes it easier for Force.com apps to consume data from any external source that conforms to the OData specification.

Coming back to our point, First thing we need to do is to sign up to salesforce application SignUp and then once you've signed up you will get your account with url like this https://username-dev-ed.lightning.force.com/lightning/page/chatter

My url was 

https://itfreelance2-dev-ed.lightning.force.com/lightning/page/chatter

So basically you have to login with your credentials 

Now, First thing we have to do is skip the login for running automation tests with playwright using playwright's codegen.

Skip Login with Playwright

Run the command on Terminal: npx playwright codegen --save-storage=cookie.json  

Hit enter

Paste this url below in the playwright codegen window and hit enter

https://itfreelance2-dev-ed.lightning.force.com/lightning/page/chatter

Type manually username as tg0008993@gmail.com and password Test@123 and click login button

Click login button

Click “Verify” button and Now open gmail to get the code: 

Gmail: https://mail.google.com/mail/u/0/#inbox/

Username: tg0008993@gmail.com

Password: Test@123

Enter the code for example: 969531 in the playwright codegen window for Verification Code as shown below

Hit verify button

You are logged in

Now, close the playwright codegen window

You will have cookies.json file saved in your projects root folder with all necessary cookies to skip the login

You can run your automation tests and the login will be skipped now.

Grab the locators. This will be something similar to the Angular application but unique which I've mentioned in my earlier post.

Locators:

export const shareAnUpdateButton = 'button:has-text("Share an update...")'

export const textBox =

'text=Share an update... Bold Italic Underline Strikethrough Remove Formatting Bullete >> p'

export const shareButton = 'button:has-text("Share")'

export const justNow = "//a[normalize-space()='Just now']"

export const messageText =

"(//span[normalize-space()='These are my Blogposts --->'])[1]"

export const chatterFeedLink =

"(//a[@data-value='https://www.blogger.com/profile/06939442079028713822'])[1]"

export const attachmentIcon = 'button:has-text("Attach up to 10 files")'

export const uploadFilesButton = 'button:has-text("Upload Files")'

export const justNowForDownload =

'[aria-label="Test Test\\, Just now"] >> text=Upload a File!'

export const downloadFile =

'[aria-label="Test Test\\, Just now"] div[role="group"] div:has-text(" DownloadDownload")'

export const uploadAFileMessageInFeed =

"(//span[normalize-space()='Upload a File!'])[1]"

export const fileInFeed = "(//a[@title='View File'])[1]"

Pages:

import { BasePage } from './basePage'

import { expect } from '@playwright/test'

import { baseUrl } from '../config'

export class LandingPage extends BasePage {

constructor(page: Page) {

super(page)

}

async openApp(): Promise<void> {

await super.open(baseUrl)

await super.waitForPageLoad()

}

async type(selector: string, text: string): Promise<LandingPage> {

return await this.waitAndFill(selector, text)

}

async clickElement(selector: any): Promise<LandingPage> {

return await this.waitAndClick(selector)

}

async clickShareButton(selector): Promise<LandingPage> {

return await this.nthClick(selector)

}

async verifyIsVisible(selector: any): Promise<LandingPage> {

const isVisible = await this.isElementVisible(selector)

expect(isVisible).toBeTruthy()

return isVisible

}

}

Tests:

/*

Scenario: Create a new Chatter post message with test url and share it with followers

and click the test url link

Test Steps:

1. Create a new chatter post message

2. Add a test URL https://www.blogger.com/profile/06939442079028713822 to the message body

3. Share the new message with the followers.

4. Check whether the message with the test URL is visible in Chatter feed

5. Verify the target location when the test URL is clicked.

*/

import { expect } from '@playwright/test'

import { baseUrl, bloggerPageTitle, bloggerPageUrl } from '../../config'

import {

shareAnUpdateButton,

textBox,

justNow,

messageText,

chatterFeedLink,

shareButton

} from '../../pageObjects/landingPage'

import test from '../../fixtures/fixture'

import fs from 'fs'

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

test.describe.serial(

'Create a new chatter post message with url and share it to followers',

() => {

test('User posts a new chatter message in the chatter feed to followers', async ({

landingPage

}) => {

await test.step(`user logged in to app successfully`, async () => {

await landingPage.openApp()

expect(await landingPage.getUrl()).toBe(baseUrl)

expect(await landingPage.getTitle()).toBe(testData.title)

})

await test.step(

'User types in message and url link in the text box and verifies the message with url is visible in the chatter feed',

async () => {

await landingPage.clickElement(shareAnUpdateButton)

await landingPage.type(textBox, testData.message)

await landingPage.clickShareButton(shareButton)

const isDisplayed = await landingPage.verifyIsVisible(justNow)

expect(isDisplayed).toBe(true)

var isVisible = await landingPage.verifyIsVisible(messageText)

expect(isVisible).toBe(true)

var isVisible = await landingPage.verifyIsVisible(chatterFeedLink)

expect(isVisible).toBe(true)

}

)

})

test('User clicks on the test url link and verifies the test url in a new tab', async ({

browser

}) => {

const context = await browser.newContext()

const page = await context.newPage()

await page.goto(baseUrl)

const link = page.locator(chatterFeedLink)

const [newPage] = await Promise.all([

context.waitForEvent('page'),

await link.click()

])

await newPage.waitForLoadState('networkidle')

expect(await newPage.title()).toContain(bloggerPageTitle)

expect(newPage.url()).toBe(bloggerPageUrl)

})

}

)

Here, I have taken two scenarios:

Scenario 1:

Scenario: Create a new Chatter post message with test url and share it with followers

and click the test url link

Test Steps:

1. Create a new chatter post message

2. Add a test URL https://www.blogger.com/profile/06939442079028713822 to the message body

3. Share the new message with the followers.

4. Check whether the message with the test URL is visible in Chatter feed

5. Verify the target location when the test URL is clicked.

Test Output: 

Scenario 2:

Scenario: Create a new Chatter post message by attaching a test file and share it with

followers and download that same file

Test Steps:

1. Create a new Chatter post message

2. Attach a test file from your local disk or folder to the message

3. Share the new message with the followers.

4. Check whether the message with the test file are visible in the Chatter feed

5. Verify that the test file can be downloaded from the posted message

Test Output: 

The two scenarios will cover opening a New tab, Upload document and Download document with Playwright. 

Here is the GitHub Repo: Playwright-Salesforce

The main point, I have observed here is the locators for Angular and Salesforce applications are little different to that of our typical React.js, Vue.js applications. 

Rest of the framework like the pages and tests remains same.

Happy Automation Testing Guys :) !