Playwright is an incredibly popular and powerful tool for end-to-end automation testing of modern web applications. It offers great advantages such as faster execution speed, great documentation, and a slew of built-in features for reporting, debugging, parallel execution, and so on. If you are thinking about building your test automation framework with Playwright or migrating from a different tool, our comprehensive Playwright Cheatsheet will help you get started with the tool quickly. As an experienced automation testing service provider, we have used Playwright in our projects for different needs and we have covered some of Playwright’s most unique and advanced methods, designed to make your testing and automation processes more efficient and effective.
Playwright Cheatsheet
We have structured our Playwright Cheatsheet in a way that it is easy for both beginners to learn and experts to quickly refer to some important snippets they might be looking for.
First up in our Playwright Cheatsheet, we’re going to start with the basics to see how to launch a browser instance in regular mode, incognito mode, and so on.
1. Launching a Browser Instance
chromium.launch(): Initiates a new instance of the Chromium browser.
browser.newContext(): Establishes a fresh browser context, which represents an incognito mode profile.
context.newPage(): Generates a new browser tab (page) within the context for interaction.
// Step 1: Initiate a new instance of the Chromium browser
const browser = await chromium.launch({ headless: false });
// Step 2: Establish a fresh browser context
const context = await browser.newContext();
// Step 3: Generate a new browser tab within the context
const page = await context.newPage();
2. Creating a Persistent Context
You can use persistent contexts to maintain session continuity and reuse authentication states across tests. It allows for testing scenarios where user sessions need to be preserved.
// Launch a persistent context using the specified user data dir
const context = await chromium.launchPersistentContext(userDataDir, {headless: false });
Selectors & Mouse Interactions
Once the browser instance has been launched, the next steps in the automation will involve keyboard and mouse interactions which we will be seeing now in our Playwright Cheatsheet.
1. Using Selectors for Element Interaction
page.goto(): Directs the browser tab to a specified URL.
page.click(): Locates and triggers a button with the identifier Example: ‘submit’.
page.fill(): Finds an input field with the name ‘username’ and inputs the value.
page.selectOption(): Identifies a dropdown menu and chooses the option.
Checkboxes and Radio Buttons: Easily toggle checkboxes and radio buttons using locator.setChecked() in Playwright. This method simplifies the process of both selecting and deselecting options.
// Step 3: Locate a checkbox using its label
const checkbox = page.getByLabel('Terms and Conditions');
// Ensure the checkbox is checked
await checkbox.setChecked(true);
// Step 4: Assert that the checkbox is checked
await expect(checkbox).toBeChecked();
type() : The type method in Playwright is used to simulate keyboard input into a text input field, text area, or any other element that accepts text input.
await page.getByPlaceholder('Enter your name').type('John Doe');
press(): The press method in Playwright is used to simulate pressing a key on the keyboard. This method allows you to automate keyboard interactions with web pages.
await page.keyboard.press("Enter");
title(): The title method in Playwright is used to retrieve the title of the current web page. You can use this method to extract the title of the web page you are interacting with during your automation or testing scripts.
const pageTitle = await page.title();
console.log(`page title is : ${pageTitle});
check(): The check method in Playwright is used to interact with checkboxes and radio buttons on a web page.
await page.check('input#myCheckbox');
Or
await page.locator('input#myCheckbox').check();
unCheck(): The uncheck method in Playwright is used to uncheck (deselect) checkboxes or radio buttons on a web page.
await page.uncheck('input#myCheckbox');
Or
await page.locator('input#myCheckbox').uncheck();
focus(): This method can be particularly useful when you want to simulate user interactions like keyboard input or navigating through a web application using keyboard shortcuts.
await page.locator('input#username').focus();
hover(): The hover method in Playwright is used to simulate a mouse hover action over a web page element. When you hover over an element, it can trigger various interactions or reveal hidden content.
await page.locator('button#myButton').hover();
or
await page.hover('button#myButton');
textContent(): Although the textContent method is not a built-in method in Playwright, it is a standard JavaScript method used to retrieve the text content of a DOM element.
allTextContents(): In Playwright, the allTextContent method is used to find array of multiple elements in the DOM. which returns an array of textContent values for all matching nodes.
const element = page.locator('div#Element');
const textContents = await element.allTextContents();
console.log(`All Text Contents : ${textContents}`);
inputValue(): The inputValue method in Playwright is used to retrieve the current value of an input element, such as a text input, textarea, or password field.
// Using inputValue to retrieve the current value of the input field
const inputValue = await page.inputValue('input#username');
console.log('Current input value:', inputValue);
close(): The close method is the last selector we’re going to see in our Playwright cheatsheet and it is used to close a browser, browser context, or page. You can use this method to gracefully shut down browser instances or specific pages. Here’s how you can use the close method in Playwright.
// Close the page when done
await page.close();
// Close the browser context
await context.close();
// Close the browser instance
await browser.close();
2. Mouse Interactions
Clicks and Double Clicks: Playwright can simulate both single clicks and double clicks on elements.
// Single click
await page.click('selector');
// Double click
await page.dblclick('selector');
Hover and Tooltips: You can use Playwright to hover over elements and reveal tooltips or activate dropdown menus.
await page.hover('selector');
const tooltip = await page.waitForSelector('tooltip-selector');
const tooltipText = await tooltip.innerText(); // Get text from the tooltip
console.log(tooltipText);
Drag and Drop: Here are the Playwright techniques for simulating drag-and-drop interactions between elements on a webpage.
// Locate the source and target elements
const source = await page.$('source-selector');
const target = await page.$('target-selector');
// Perform drag-and-drop
await source.dragAndDrop(target);
move(): mouse.move(x, y) in Playwright is used to move the mouse to a specific position on the page. This can be useful for simulating mouse movements during automated testing. The x and y parameters represent the coordinates where you want the mouse to move, with (0, 0) being the top-left corner of the page.
await page.mouse.move(100, 100);
dragTo(): This method is useful for automating drag-and-drop interactions in your web application. Let’s see how to use the dragTo() method with a sample snippet in our Playwright cheatsheet.
//Locate the source and target elements you want to drag & drop
const sourceElement = await page.locator('source-element-selector')
const targetElement = await page.locator('target-element-selector')
// Perform the drag-and-drop action
await sourceElement.dragTo(targetElement)
Pressing and Releasing Mouse Buttons: In Playwright, you can simulate pressing and releasing mouse buttons using the mouse.down() and mouse.up() methods.
const myElement = page.locator('.my-element')
await myElement.mouse.down() // Press the left mouse button
await myElement.mouse.up() // Release the left mouse button
Context Menu: See how Playwright interacts with context menus by right-clicking elements and selecting options.
// Right-click on an element to open the context menu
await page.click('element-selector', { button: 'right' });
// Wait for the context menu to appear
await page.waitForSelector('context-menu-selector', { state: 'visible' });
// Click on an option within the context menu
await page.click('context-menu-option-selector');
Scrolling: Discover how to simulate scrolling actions in Playwright using mouse interactions. Demonstrate scrolling through a long webpage to ensure all content loads correctly or to capture elements that only appear when scrolled into view.
// Click on an option within the context menu
await page.click('context-menu-option-selector');
await page.evaluate((x, y) => { window.scrollBy(x, y); });
Note: Use stable selectors like IDs or data attributes to ensure robust tests; validate mouse interactions by asserting resulting UI changes.
Locators
As we all know, a locator is a tool for locating elements on a webpage and Playwright has a lot of available locators. Now in our Playwright cheatsheet, we’re going to see the several available methods for finding elements, and the chosen parameters are sent to the methods for finding elements.
1. getByRole(): getByRole is used to query and retrieve elements on a web page based on their accessibility roles, such as “button,” “link,” “textbox,” “menu,” and so on. This is particularly useful for writing tests that focus on the accessibility and user experience of a web application.
// Click on an option within the context menu
await page.getByRole('textbox', {name:'Username'}).fill(‘vijay’);
2. getByText(): Although getByText() is not a built-in method in Playwright, it is a method that is often used in testing libraries like Testing Library (e.g., React Testing Library or DOM Testing Library) to query and interact with elements based on their text content.
await page.getByText('Forgot your password? ').click();
3. getByPlaceholder(): The getByPlaceholderText method is used to select a DOM element based on its placeholder attribute in an input element.
4. getByAltText(): getByAltText() is not a method associated with Playwright; it’s actually a method commonly used in testing libraries like React Testing Library and Testing Library (for various JavaScript frameworks) to select an element by its alt attribute. If you are writing tests using one of these testing libraries, here’s how you can use getByAltText().
5. getByTitle() :getByTitle() method in Playwright is for interacting with an HTML element that has a specific title attribute.If you are writing tests using one of the testing libraries mentioned above, here’s how you can use it
await page.getByTitle('Become a Seller').click();
File and Frame Handling
As we have seen how to launch the browser instance, use selectors, and handle mouse interactions in our Playwright cheatsheet, the next step would be to see how we can handle files, frames, and windows. Let’s start with files and frames now.
1. Handling File Uploads
Easily handle file uploads during testing to ensure the functionality works as expected in your application by referring to the below code.
// Navigate to the page with the file upload form
await page.goto('your-page-url');
// Trigger the file input dialog
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'),
page.click('button-to-trigger-file chooser')]);
// Set the files to upload
await fileChooser.setFiles('path/to/your/file.txt');
2. Interacting with Frames
Playwright allows you to interact with frames on a web page using methods like frame(), frames(), and waitForLoadState(). Here’s how you can do it.
Use the frame() method to access a specific frame by its name, URL, or element handle.
Get Frame using Name FrameSelector :
const allFrames = page.frames();
Get Frame using Name Option :
const myFrame = page.frame({name: "frame1"});
or
const myFrame = page.frame("frame1");
Navigate within a specific frame using the goto() method.
await frame.goto('https://codoid.com');
Go back and forward within a frame using the goBack() and goForward() methods
await frame.goBack();
await frame.goForward();
Wait for a frame to load or reach a specific load state using the waitForLoadState() method.
await frame.waitForLoadState('domcontentloaded');
Best Practices:
Automate file uploads and downloads to streamline file-related workflows. You can switch between frames using IDs or names for seamless interaction.
Windows Handling
Windows handling is an important aspect of web automation and testing, especially when dealing with scenarios where you need to interact with multiple browser windows or tabs. And that is why we have covered it in our Playwright Cheatsheet.
Playwright provides methods for handling multiple browser windows and tabs within a single browser instance. Here’s how you can work with windows handling in Playwright.
Close a specific window/tab when you are done with it:
await secondPage.close();
Best Practices:
Manage multiple windows or tabs by tracking handles and switching context as necessary. Make sure to close windows or tabs after tests to maintain a clean testing environment.
Special Capabilities
As stated earlier in our Playwright Cheatsheet, we have also covered advanced interactions in addition to the basic commands. The first of the many advanced interactions we’re going to see special capabilities such as device emulation and record and playback capabilities.
1. Emulating Devices:
You can emulate a device for responsive testing to ensure your app looks good on various devices. This is crucial for testing mobile responsiveness and user experience.
const { devices, chromium } = require('playwright');
// Define the device you want to emulate
const iPhone = devices['iPhone 11'];
// Launch a browser and create a new context with device emulation
const browser = await chromium.launch();
const context = await browser.newContext({...iPhone,});
2. Recording and Replaying Actions
You can automatically generate Playwright scripts with ease by recording your actions within a browser. This speeds up the creation of test scripts by capturing real user interactions.
npx playwright codegen
Network Interception and Manipulation
Testing is not just about validating the results with happy paths as users might face numerous challenges in real-world scenarios. One of the common challenges can be with the network and we can manipulate it based on our testing needs. Let’s see how in our Playwright Cheatsheet.
1. Mocking Responses
Intercept and mock network responses to evaluate your app’s handling of different API responses. This is useful for testing error scenarios and verifying API integrations.
// Intercept requests to a specific URL
await page.route('**/api/data', async (route) => {
// Respond with custom data
await route.fulfill({
contentType: 'application/json',
body: JSON.stringify({ key: 'mockedValue' }) }); });
2. Simulating Offline Mode
Test how your application behaves when offline by simulating network disconnections. This ensures that your app handles offline scenarios seamlessly.
// Set the page to offline mode
await page.setOffline(true);
// Navigate to a page and perform actions
await page.goto('https://example.com');
// Restore network connection (optional)
await page.setOffline(false);
Screenshots and Visual Comparisons
Screenshots play a vital role in terms of reporting and with Playwright, you have the provision of capturing full-page screenshots and also screenshots of a particular element if required.
1. Screenshots
Capturing a Full-Page Screenshot
You can take a screenshot of the entire page to visually verify the UI. This is beneficial for visual regression testing to identify unexpected changes.
// Take a full-page screenshot
await page.screenshot({ path: 'fullpage-screenshot.png', fullPage: true});
There is also a provision to capture a screenshot of a specific element to focus on individual UI components. It helps in verifying the appearance of particular elements.
// Locate the element
const element = await page.$('selector-for-element');
if (element) {
// Take a screenshot of the element
await element.screenshot({ path: 'element-screenshot.png' });
console.log('Element screenshot taken'); }
Debugging and Tracing
The next set of advanced interactions we’re going to see in our Playwright cheatsheet is the debugging and tracing features that enable easier debugging and failure analysis/
Enabling Debug Mode(SlowMo)
Using Playwright, you can execute tests in a visible browser with slow motion enabled for easier debugging. This helps you see what’s happening in real time and diagnose the issues.
// Launch the browser with slowMo
const browser = await chromium.launch({
headless: false, // Run in headful mode to see the browser
slowMo: 1000 // Slow down actions by 1000 milliseconds (1 second)
});
Capturing Traces
You can capture detailed traces to analyze test failures and performance issues. This offers insights into test execution for debugging purposes.
// Start tracing
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://example.com');
// Perform actions
await page.click('selector-for-button');
await page.fill('selector-for-input', 'some text');
// Stop tracing and save it to a file
await context.tracing.stop({ path: 'trace.zip' });
Best Practices:
You can also use console logs and debug statements within tests to troubleshoot issues and enable tracing to capture detailed logs for performance analysis.
Additional Methods
In the final section of our Playwright cheatsheet, we are going to see a few additional methods such as retrying actions, using locator assertions, and forcing colors mode.
Retrying Actions
Retrying actions addresses intermittent issues by repeatedly attempting a failed action until it either succeeds or the maximum number of retries is exhausted.
const retryDelay = 1000; const maxRetries = 3; // 1 second delay between retries
await new Promise(resolve => setTimeout(resolve, retryDelay)); // Delay before retrying
Using Locator Assertions
You can add assertions to ensure elements are visible, improving test reliability. This verifies that critical elements are present on the page.
// Check if the element is visible
await expect(page.locator('selector-for-element')).toBeVisible();
There is even an option to simulate the high contrast mode for accessibility testing, ensuring usability for all users. This is crucial for testing the accessibility features of your application.
// Force dark color scheme
await page.emulateMedia({ forcedColors: 'dark' });
await browser.close(); })();
Conclusion
Playwright offers an extensive set of features that go beyond basic browser automation. Whether you’re testing complex user interactions, simulating various devices and network conditions, or capturing detailed traces for debugging, Playwright equips you with the tools you need to create reliable and efficient tests. We hope our Playwright cheatsheet will be helpful for you to use all these features with ease.
Playwright is an automation testing tool that has been gaining a lot of traction in the QA community. Despite being the latest tool compared to Selenium and Cypress, Playwright has become a popular choice today. Being a QA manager, you might be in the position to choose an automation tool for your testing needs or might be considering migrating to a different technology to better suit your needs. During such a scenario, you’ll have a lot of questions in your mind that you will be searching for answers to. In this Playwright overview blog, we’re going to answer all those questions as our prospective clients ask similar questions during introductory or discovery calls for our test automation services.
Common Playwright Questions
Before we head over to the answers, let’s first list out all the commonly asked questions that we will be addressing.
If an automation tester is fond of a particular tool, they will likely promote it to their colleagues and acquaintances. Nonetheless, we must evaluate the pros and cons before suggesting an automation testing tool. Let us examine each question’s solutions individually in our Playwright overview blog.
1. What is the difference between Cypress and Playwright?
Cypress is a web application automation testing tool and it differs from Selenium in one fundamental aspect. Selenium sends a command to a browser via JSON wire protocol and calls the browser API to perform an action on the application. However, in Cypress, your test code can access all the application’s objects like your product code since it runs the tests inside of the browser.
Advantages of running tests inside the browser:
You can alter web traffic on the fly
You can modify everything coming in & out of the browser
Faster execution
No need to add additional wait commands
Enable advanced debugging facilities
Now let’s take a look at Playwright. It is also a framework to automate web applications and it achieves all the features of Cypress without using in-process test runner. Currently, Playwright is a popular choice among testers due to its quick test execution and compatibility with all modern browsers. It also supports multiple languages such as JavaScript, TypeScript, Python, C#, and Java for writing the tests. On the other hand, Cypress only supports JavaScript as its scripting language.
2. What programming language can I choose for Playwright?
You can select the appropriate scripting language according to your team’s familiarity and proficiency. The core features and implementations of Playwright are consistent across all supported languages.
To assess the release information for each language, simply refer to the corresponding GitHub repository for that language’s implementation.
Although we are viewing the advantages throughout the Playwright overview blog, we have listed the key aspects for you to get a quick understanding.
Playwright is a reliable & e2e automation testing framework for modern web apps
It works with Chromium, Chrome, Edge, Firefox, & WebKit
Works on any platform
You can execute the tests in full isolation
Test Execution is super fast
Supports Headless and Headful modes
Playwright is much faster than Cypress, Selenium, WebDriverIO, & Puppeteer tools
500+ contributors around the world manage the Playwright codebase
You can automate API tests as well
4. Can we automate Mobile Applications using Playwright?
Another major criterion while choosing the right automation tool for you is its capability to automate different types of applications. Especially the web and mobile applications combination is something that many are on the lookout for. Here is the overview of Playwright’s mobile application testing capabilities.
You cannot automate Native mobile apps
You can automate mobile web on Android emulators or real devices using ADB commands. However, it is still in the experimental stage
There is no official confirmation of iOS support yet
5. What reports can I get from Playwright?
Reporting is the next part we’ll be covering in our Playwright overview as it is a crucial aspect when deciding the right test automation tool for you. Here is the list of reporting options available in Playwright.
List Reporter – This is the default reporter of Playwright. It prints a line for each test being run
Line Reporter – It reports the last executed test and prints error details if there is a failure. Line reporter is useful to monitor the execution progress instead of viewing the entire test results.
Dot Reporter – It is a concise report that shows only a single character for each test execution.
HTML Reporter – It generates reports as a webpage
Blob Reporter – Use blob reporter when you run tests in parallel.
JSON Reporter – Generates report as JSON file
Junit Reporter -JUnit reporter produces a JUnit-style XML report.
Microsoft released the first version of Playwright on Feb 1, 2020. As of writing this blog, 127 versions have been released and 500+ contributors around the world manage the Playwright codebase. That is a very good stat that can give you a lot of confidence in choosing Playwright.
8. Can I convert Cypress scripts to Playwright?
For those who have already used Cypress for your test automation and are in the thought of migrating, our Playwright overview blog also offers possible options to move to Playwright. There are multiple tools/plugins in the market to convert Cypress scripts to Playwright, and here’s the list.
cy2pw – This experimental node package has the capability to transform standard Cypress structures into Playwright.
cypress-to-playwright – It is a conversion tool that can parse the entire script directory of Cypress to Playwright structure. You can find the supported snippets by viewing the linked page.
ChatGPT – You can also try ChatGPT to convert your scripts.
9. Can I run Playwright from CI\CD tools?
Ensuring that your changes do not disrupt the production code is a vital requirement when it comes to test automation. The great news is that you can run your Playwright tests on a Continuous Integration tool for every commit and pull request. It even supports all major CI tools – Github Actions, Azure Pipelines, CircleCI, Jenkins, Bitbucket Pipelines, Gitlab CI, & Google Cloud Build.
Playwright Overview
One of the standout benefits of using Playwright is its speed. With parallel execution capabilities, multiple tests can run simultaneously on different browsers, saving valuable time in the testing process. This not only increases efficiency but also allows for more thorough testing coverage. Although we have discussed all the key factors a QA manager should consider in our Playwright overview blog, one must always see how well the tool will fit their testing needs and make the final call. We hope you are now in a better position to make that decision.
Playwright is a popular test automation tool that offers a lot of reporting options for its users such as built-in reporters, custom reporters, and support for integrating third-party reporters. The Playwright’s default in-built reporter is the list reporter. However, when running tests via the CI tool, Playwright will switch to the Dot reporter by default. There is also a good reason why the Dot Reporter is chosen as the default Playwright Reporting option during execution in Continuous Integration tools. We have even made a YouTube video explaining it and recommend you check it out.
Like any tool or feature, there will always be a few drawbacks. Based on our experience of working with Playwright while delivering automation testing services to our clients, we were able to overcome these drawbacks with a few workarounds. So in this blog, we will be sharing how you can customize the Dot reporter to address these drawbacks and enhance your Playwright reporting. But before that, let’s take a look at what the disadvantages are.
Disadvantages of Dot Reporter:
During the execution process, the Dot Reporter will not display the number of tests completed. So you’ll have to manually count if you want to get the total number of tests executed.
In the event of a failure, an ‘F’ will appear in red. But the issue is that it will not indicate which specific test has failed during execution.
Customization of Dot Reporter:
As stated earlier, Playwright reporting has built-in options and customizing capabilities as well. So, let’s delve into the customization aspect to address the disadvantages of Dot Reporter. If you prefer to watch the entire step-by-step tutorial as a video, you can check out our video covering the same. Or you can prefer to continue reading as well.
Step 1: Creating Reporter Listener Class
Create a folder by the name ‘utils’ inside your project directory.
Create a TypeScript file using the name ‘CustomReporter’ with the below code
import type {Reporter, FullConfig, Suite, TestCase, TestResult, FullResult} from '@playwright/test/reporter';
class CustomReporter implements Reporter {
}
export default CustomReporter;
Step 2: Configure Reporter Listener in Playwright Config file
Open the playwright.config.ts file
Add the reporter listener file that you created in Step 1 in the Playwright config file
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: './utils/CustomReporter.ts',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://127.0.0.1:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
});
Step 3: Declare & Initialize Properties
In the CustomReporter class, add three class properties
totalTests-To hold total tests in the test suite.
totalTestsExecuted-To count the number of tests that have been executed in the current execution.
noOfTestsPerLine-To count the number of test statuses or results to be shown in a line.
Initialize the properties in the constructor
class CustomReporter implements Reporter {
totalTests: number;
noOfTestsPerLine: number
totalTestsExecuted: number
constructor() {
this.totalTests=0
this.noOfTestsPerLine=0
this.totalTestsExecuted=0
}
}
Step 4: Add the onBegin method
Add the onBegin method.
Save the total tests to be executed in the totalTests variable.
class CustomReporter implements Reporter {
totalTests: number;
noOfTestsPerLine: number
totalTestsExecuted: number
constructor() {
this.totalTests=0
this.noOfTestsPerLine=0
this.totalTestsExecuted=0
}
onBegin(config: FullConfig, suite: Suite) {
this.totalTests = suite.allTests().length;
console.log(`Executing ${this.totalTests} test(s)`);
}
}
Step 5: Add the printTotalExecuted method
This method will be called to print how many tests have been executed against the total tests.
It is possible to print the skipped status in ANSI Yello color. You can also use different color codes based on your preference. You can check the available color codes here .
onTestEnd(test: TestCase, result: TestResult) {
if (this.noOfTestsPerLine==50){
this.printTotalExecuted()
}
++this.totalTestsExecuted
++this.noOfTestsPerLine
//Printing Skipped Status in ANSI yellow
if (result.status === 'skipped') {
process.stdout.write('\x1b[33m°\x1b[39m');
return;
}
}
Step 10: Printing Retry Status
If a test has Timed out or Failed and Playwright does know what status needs to be marked, then the test will be marked for Retry.
Since the test will be rerun, we need to decrease the totalTestsExecuted variable to ensure accuracy.
onTestEnd(test: TestCase, result: TestResult) {
if (this.noOfTestsPerLine==50){
this.printTotalExecuted()
}
++this.totalTestsExecuted
++this.noOfTestsPerLine
//Printing Skipped Status in ANSI yellow
if (result.status === 'skipped') {
process.stdout.write('\x1b[33m°\x1b[39m');
return;
}
//Printing the test that marked for retry
if (test.outcome() === 'unexpected' && result.retry < test.retries) {
process.stdout.write(`\x1b[33mx\x1b[39m`);
--this.totalTestsExecuted;
return;
}
}
Step 11: Printing Failure Status & Test Title
Concatenating test title with failure status.
After printing the status & title, call the printTotalExecuted method to print Total Tests Executed and Total Tests in the Test Suite.
onTestEnd(test: TestCase, result: TestResult) {
if (this.noOfTestsPerLine==50){
this.printTotalExecuted()
}
++this.totalTestsExecuted
++this.noOfTestsPerLine
//Printing Skipped Status in ANSI yellow
if (result.status === 'skipped') {
process.stdout.write('\x1b[33m°\x1b[39m');
return;
}
//Printing the test that marked for retry
if (test.outcome() === 'unexpected' && result.retry < test.retries) {
process.stdout.write(`\x1b[33mx\x1b[39m`);
--this.totalTestsExecuted;
return;
}
//Printing failure status and test name
if (test.outcome() === 'unexpected' && result.status === 'failed') {
process.stdout.write('\x1b[31m'+"F("+test.title+")"+'\x1b[39m');
this.printTotalExecuted()
return;
}
}
Step 12: Other Statuses (Flaky, TimedOut, & Passed)
onTestEnd(test: TestCase, result: TestResult) {
if (this.noOfTestsPerLine==50){
this.printTotalExecuted()
}
++this.totalTestsExecuted
++this.noOfTestsPerLine
//Printing Skipped Status in ANSI yellow
if (result.status === 'skipped') {
process.stdout.write('\x1b[33m°\x1b[39m');
return;
}
//Printing the test that marked for retry
if (test.outcome() === 'unexpected' && result.retry < test.retries) {
process.stdout.write(`\x1b[33mx\x1b[39m`);
--this.totalTestsExecuted;
return;
}
//Printing failure status and test name
if (test.outcome() === 'unexpected' && result.status === 'failed') {
process.stdout.write('\x1b[31m'+"F("+test.title+")"+'\x1b[39m');
this.printTotalExecuted()
return;
}
if (test.outcome() === 'unexpected' && result.status === 'timedOut') {
process.stdout.write('\x1b[31mT\x1b[39m');
return;
}
if (test.outcome() === 'expected' && result.status === 'passed') {
process.stdout.write('\x1b[32m.\x1b[39m');
return;
}
if (test.outcome() === 'flaky') {
process.stdout.write('\x1b[33m±\x1b[39m');
return;
}
}
Step 13: Finally, Add onEnd Method
Print total tests executed just in case it is missed before the end of the execution.
Print the status of the entire execution.
onEnd(result: FullResult) {
if (this.noOfTestsPerLine !== 0) this.printTotalExecuted();
console.log(`\nFinished the run: ${result.status}`);
}
Full Code:
import { FullConfig } from '@playwright/test';
import { FullResult, Reporter, Suite, TestCase, TestResult } from '@playwright/test/reporter';
class CustomReporter implements Reporter {
totalTests: number;
noOfTestsPerLine: number
totalTestsExecuted: number
constructor() {
this.totalTests=0
this.noOfTestsPerLine=0
this.totalTestsExecuted=0
}
onBegin(config: FullConfig, suite: Suite) {
this.totalTests = suite.allTests().length;
console.log(`Executing ${this.totalTests} test(s)`);
}
printTotalExecuted(){
process.stdout.write(`[${this.totalTestsExecuted}/${this.totalTests}]\n`);
this.noOfTestsPerLine=0
}
onTestEnd(test: TestCase, result: TestResult) {
if (this.noOfTestsPerLine==50){
this.printTotalExecuted()
}
++this.totalTestsExecuted
++this.noOfTestsPerLine
//Printing Skipped Status in ANSI yellow
if (result.status === 'skipped') {
process.stdout.write('\x1b[33m°\x1b[39m');
return;
}
//Printing the test that marked for retry
if (test.outcome() === 'unexpected' && result.retry < test.retries) {
process.stdout.write(`\x1b[33mx\x1b[39m`);
--this.totalTestsExecuted;
return;
}
//Printing failure status and test name
if (test.outcome() === 'unexpected' && result.status === 'failed') {
process.stdout.write('\x1b[31m'+"F("+test.title+")"+'\x1b[39m');
this.printTotalExecuted()
return;
}
if (test.outcome() === 'unexpected' && result.status === 'timedOut') {
process.stdout.write('\x1b[31mT\x1b[39m');
return;
}
if (test.outcome() === 'expected' && result.status === 'passed') {
process.stdout.write('\x1b[32m.\x1b[39m');
return;
}
if (test.outcome() === 'flaky') {
process.stdout.write('\x1b[33m±\x1b[39m');
return;
}
}
onEnd(result: FullResult) {
if (this.noOfTestsPerLine !== 0) this.printTotalExecuted();
console.log(`\nFinished the run: ${result.status}`);
}
}
export default CustomReporter;
Conclusion:
In this blog, we have shown how to overcome the Playwright reporting issues usually seen with the Dot Reporter. In addition, you can use the onEnd method to print a summary of the entire execution, including Total Passed, Total Failed, Total Skipped, and Total Flaky.
The customization of Playwright Dot Reporter is a valuable tool for developers and testers looking to enhance their automated testing processes. Through the use of custom reporters, users have the ability to tailor their test reports to fit their specific needs and preferences.
One of the main benefits of using custom reporters is the flexibility it offers. With Playwright Dot Reporter, users can choose which information they want to include in their reports and how they want it displayed. This allows for more targeted and organized reporting, making it easier to interpret test results and identify any issues that may arise.
Have you ever felt overwhelmed by complex deployment processes or felt it tedious to integrate multiple tools to get things done? Then TOSCA is a great tool that can solve all your problems. But what is the TOSCA Automation tool? How does it work? How exactly can it benefit you? These are all the major questions we will be answering in our blog. Being a leading automation testing company, we have expertise in a range of automation tools and TOSCA is one of them. So let’s get started!
What is the TOSCA Automation Tool?
TOSCA (Test Automation Software for Continuous Application) is a powerful tool developed by Tricentis and is revolutionizing how organizations manage and deploy their cloud applications. It has the capability to achieve end-to-end automation testing without having to write any code. It supports a graphical model-based approach that enables testers to create and maintain tests by defining the business processes and application workflows instead of scripting. The best part of the TOSCA Automation tool is that it supports a wide range of technologies such as web, mobile, desktop applications, APIs, and even databases.
At its inception, TOSCA was born out of a need for standardization and automation in cloud computing. But it has evolved ever since then to become the go-to choice for enterprises looking to streamline their IT operations and improve efficiency. The primary reason for this kind of popularity is that TOSCA has been able to keep pace with business needs by constantly introducing new features and capabilities.
Key Features of the TOSCA Automation Tool
TOSCA is designed to support a wide range of testing needs in modern software development environments. And to achieve that it offers a robust set of features that will enhance the efficiency, coverage, and ease of automated testing.
The standout feature of TOSCA is its graphical modeling capabilities. This feature allows users to visually represent complex system architectures and their dependencies clearly and intuitively. As stated earlier, the TOSCA Automation tool is scriptless so you can easily drag and drop components onto a canvas. Though we utilize the Gherkin format while scripting in Selenium to ensure that all stakeholders can easily understand the purpose of each script, the visual representation makes it a lot easier to collaborate among team members and other department stakeholders too.
Automated Deployment
Another significant feature of TOSCA is its automated deployment and provisioning capabilities. It allows users to define their infrastructure requirements in a template in which they can specify how resources should be provisioned and configured. The users can then utilize this template to automate the deployment process and ensure consistency across different environments.
Additionally, organizations can even easily replicate their infrastructure setup across multiple instances without any manual work or intervention. This makes it a lot easier to roll out new applications or updates and also to minimize downtimes during times of failure. In addition to saving time, it even reduces the risk of human errors during deployment.
Integration Capabilities
One way TOSCA is able to achieve this kind of seamless deployment is due to its capability to integrate with a wide range of tools. Be it DevOps tools like Jenkins or Ansible, or cloud management platforms like AWS or Azure, TOSCA has the ability to offer a more holistic approach to automation and orchestration. This level of connectivity makes it easy to streamline the processes across different platforms and across diverse infrastructures. The wide range of support makes it possible to be used by different organizations that use different tech stacks that suit their needs.
Scalability & Flexibility
A by-product of these key features we’ve seen is that it makes the TOSCA automation tool highly scalable & flexible. Its scalability allows users to easily adjust resources such as server and storage requirements based on their needs. Whether you’re deploying a simple application or a complex network infrastructure, TOSCA has the required flexibility to customize your deployment process the way you want it. Any tool that can help organizations meet their changing business needs will definitely turn out to be a success. And TOSCA is no exception.
How does TOSCA work?
It’s great that the TOSCA automation tool offers such great features. But how does it actually get the job done? TOSCA actually breaks down complex applications into smaller and simpler components through graphical modeling. The application’s structure and dependencies are defined using templates that are written in a standardized modeling language. The template has nodes and each node represents elements such as servers, databases, and networking components. Relationships between these nodes are made with the help of properties to denote how they interact with each other. The scripts needed for deployment are stored as artifacts. The execution of a TOSCA template follows a structured sequence where the orchestrator reads and interprets the template instructions. Finally, it performs actions such as provisioning resources, configuring settings, and managing dependencies based on the defined relationships.
Conclusion
So it is evident that the TOSCA Automation Tool is equipped with a comprehensive set of features designed to address the challenges of modern software testing. Features such as graphical modeling, scriptless testing, automated deployment, and robust integration capabilities make it a popular choice. It has direct impacts such as enhancing test automation, improving test coverage, and accelerating time-to-market. We will definitely be going deep in terms of how to use TOSCA in your day-to-day projects in our upcoming blogs about it. So make sure to keep an eye out on our website.
Artificial Intelligence is taking the world by storm and the software testing industry is no different. It almost seems like a new AI tool is released every day. Out of the many AI-based testing tools in the market, we have picked the 10 best AI Automation Testing Tools that could truly improve your software testing process. Being a leading software testing company, we understand the importance of AI adoption in software testing. But at the same time, we also understand the value of human intelligence. So we have prepared this list of AI Test Automation Tools that are focused on augmenting the capabilities of Artificial Intelligence to improve the effectiveness of testing instead of trying to replace manual testing or act as a standalone solution.
We believe that is the right way to make the best use of AI. It will ease the process of executing repetitive test cases, collecting performance data, detecting bugs, and so on. Without any further ado, let’s take a look at the top AI-based Test Automation tools. In addition to giving a brief overview of each tool, we will also be listing the key features and suitable use cases.
Top 10 AI Automation Testing Tools
S. No
Tool Name
Our Recommended Use Case
1
Test.im
If you are looking for a simple low-code option
2
Perfecto Scriptless
Easy to use and capable of handling complex Web and Mobile application automation
3
Applitools
Great choice for large scale Visual Testing of Web, Mobile, and Native apps
4
Functionize
A go-to solution if you follow DevOps and have comprehensive testing requirements
5
TestCraft
Selenium integration makes it a good choice if the focus is Web App automation
6
ACCELQ
Apt for Model-based testing requirements
7
Parasoft
If security testing is a primary requirement, you can choose Parasoft. Also supports performance testing.
8
Mabl
Supports Performance testing and great for data-driven testing
9
Appvance
For testing on multiple browsers and devices as it supports a lot of real devices & emulators
10
Test.ai
A good choice is mobile app automation is the primary focus
1. Testim
The first in our list of AI test automation tools is Testim. It is a codeless or a low-code tool that uses a visual test creation approach. So it allows users to create automated tests without the need for extensive programming knowledge. It utilizes Selenium as one of its underlying technologies to interact with web browsers and even has the capability to work along with Selenium.
Key Features
Finding Locators: With the help of AI, it will identify accurate locators for elements making sure your automation test scripts are stable and easy to maintain in the long run.
Unified API & UI Testing: You can get maximum test coverage as it has the provision to integrate API testing with web automation.
Test Organization: You can easily organize and manage your test cases by creating Test Suites, Test Plans, and custom labels.
Best Suited for:
Organizations or individuals looking for codeless automation solutions with AI-driven features to assist in test creation, maintenance, and execution may find Testim a suitable choice in our list of AI Automation Testing Tools.
2. Perfecto Scriptless
Perfecto Scriptless is the next on our list of AI Automation Testing Tools. It is a testing solution designed with simplicity in mind. So it is a great choice for testers with varying levels of technical expertise. It can be used to perform automated testing for both mobile and web applications. As the name suggests, you can create and maintain automation tests with ease, even without advanced coding skills
Key Features
Codeless Test Creation: You can easily create test scenarios without writing any code.
Test Maintenance & Execution: Not just creating the tests, but maintaining the tests are also easy as the AI algorithms keep the test scenarios up-to-date without any manual intervention.
Easy Collaboration: It enables seamless collaborations between the Developers and QA teams as it allows the sharing of the reports via the cloud.
Scheduled Execution: The test execution can also be easily scheduled without any complex setup to reduce manual intervention even further.
Best suited:
Perfecto Scriptless is adaptable to meet the demands of intricate test scenarios within complex applications. It can be seamlessly integrated into CI/CD pipelines to effectively meet the rigorous testing demands of large and complex software projects.
3. Applitools
Applitools specializes in visual testing and monitoring platforms to enhance the quality assurance process for web and mobile applications. Unlike other tools on our list of AI Automation Testing Tools, Applitools has a set of unique features such as support for accessibility testing & localization testing.
Key Features
Visual Testing: By integrating Applitools with Selenium, you can enhance your test automation strategy by adding visual validation to ensure the visual correctness of your web applications.
Accessibility Testing: It allows users to validate the visual aspects of an application against accessibility standards.
Localization Testing: It supports localization testing by validating visual elements across different languages and locales.
Native Apps: Applitools for native apps streamlines and enhances the speed and reliability of testing native mobile applications on well-known iOS and Android devices.
Test Management: It has the capacity to automate the review and maintenance of a large number of defects to simplify the test management process.
Best suited for:
Applitools is ideal for big companies with complicated apps and extensive sets of tests. It helps them conduct visual testing on a large scale, ensuring a consistent user experience across various features.
4. Functionize
Functionize’s visual testing offers a thorough solution for assessing the visual components of your applications. With its advanced features, this functionality improves the testing process by concentrating on visual elements, guaranteeing the uniform appearance and layout of both web and mobile applications.
Key Features
Self-healing tests: Functionize drastically reduces the effort required by the QA team as it dynamically adapts and heals tests as per the changes made in the application.
Computer vision: Its visual AI and machine learning capabilities make it easy to understand the intent of the tests.
Root cause analysis: The engine identifies the root cause of test failures, streamlining the debugging process in intricate systems
Best Suited for:
Functionize AI is well-suited for organizations that seek a comprehensive testing solution, including functional, regression, and visual testing. From our list of AI Automation testing Tools, it will be a great choice for those embracing DevOps principles for continuous integration and deployment. It caters to the needs of both smaller or medium-level enterprises and DevOps-centric organizations.
5. TestCraft
One of its standout features when compared to most other AI Automation Testing Tools is that it can seamlessly integrate with Selenium WebDriver, a powerful tool widely used for web application testing. So TestCraft empowers both technical and non-technical users to create robust automated tests effortlessly.TestCraft’s visual testing approach not only simplifies test creation but also contributes to easy test maintenance.
Key Features
AI-Powered Test Generation: It offers features like intelligent test generation, test maintenance, or suggestions for improving test scripts.
AI-Driven Features: AI-powered functionalities, such as intelligent test generation, self-healing tests, and automated test maintenance, can enhance the efficiency of the testing process.
Visual Testing: TestCraft can help detect UI discrepancies and ensure the visual integrity of your application across different devices.
Easy to Maintain: It intelligently adapts to changes in the application’s UI, reducing the effort required to update tests when the application undergoes modifications.
Best Suited for:
If your organization’s primary focus is on testing web applications, TestCraft would be a good choice due to its integration with Selenium. It also provides a codeless solution for creating and executing automated tests on web-based interfaces.
We’re halfway through our list of AI Automation Testing Tools and ACCELQ is the next. It enables automation testing without the need for extensive coding. Its intuitive visual interface allows testers to create and execute tests using a simple drag-and-drop approach. Also, it uses intelligent algorithms to adapt to changes in the application’s UI, reducing the effort required for test maintenance
ACCELQ supports end-to-end testing of applications, allowing teams to validate the entire user journey and ensure that all components interact correctly.
Key Features
Self-Healing: It has the ability to automatically update or fix test scripts when there are changes in the application under test.
Cross-Browser and Cross-Platform Testing: Support for testing applications across different browsers and platforms to ensure compatibility.
Continuous Testing and Shift-Left Approach: AccelQ supports continuous testing practices, enabling teams to integrate testing activities earlier into the software development lifecycle. It aligns with the shift-left approach to testing.
Best Suited for:
AccelQ’s support for model-based testing can be particularly beneficial for organizations that emphasize creating models of their applications to generate automated tests automatically.
7. ParaSoft SOAtest
Parasoft is a widely used AI-based testing tool to automate various types of tests, including unit tests, regression tests, and system tests. Automation helps save time, ensures consistency, and allows for quick feedback during the development process. Also, it includes static code analysis tools to assess code quality and identify potential issues early in the development process. This aids in maintaining clean, efficient, and secure code.
Key Features
Codeless Testing: It provides a visual, codeless interface for creating and managing API tests, making it more accessible to non-developers.
Documentation and Reporting: It offers documentation generation and reporting features to help testers and developers understand the status and results of API tests.
Performance Testing: Features for measuring and analyzing the performance of APIs, including response times and throughput.
Security Testing: It has features for testing the security of APIs, including authentication, authorization, and protection against common vulnerabilities, making it a unique option in our list of AI Test Automation Tools.
Best Suited for:
If your organization is focused on API Testing and Security Testing, then Parasoft would be the go-to option in our list of AI Automation Testing tools as it will ensure adherence to industry standards.
8. Mabl
Mabl is an AI Automation Testing Tool that integrates advanced technologies like machine learning into the testing process. Mabl is widely used for regression testing, where automated tests ensure that recent changes or updates to an application haven’t introduced new issues or bugs.
The platform’s self-healing capabilities contribute to maintaining the reliability of regression test suites. Mabl includes visual testing capabilities, enabling teams to verify the visual aspects of their applications
Key Features
Performance Testing: Though Mabl primarily focuses on functional testing, it also provides insights into performance-related issues through metrics and data analysis.
Mobile Testing: Mabl stands out in the realm of mobile testing due to its advanced features, encompassing both real-device testing and emulators, which surpass the offerings of many competitors.
Dynamic Element Recognition: The tool uses dynamic locators to identify UI elements, making tests more resilient to changes in the application’s structure.
Data-Driven Testing: The tool supports data-driven testing, enabling users to execute the same test scenario with different sets of input data.
Best Suited For:
Mabl’s visual testing capabilities make it suitable for organizations that prioritize the visual aspects and user experience of their applications. Visual testing helps catch issues related to UI changes and ensures a consistent user experience.
9. Appvance IQ
Appvance IQ offers a scriptless test creation approach, making it accessible to both technical and non-technical users. This is particularly beneficial for those without extensive coding skills. It caters to both functional and performance testing needs, offering a comprehensive solution for testing different aspects of applications
Key Features:
Integration with Mobile Platforms: Seamless integration with mobile platforms (iOS, Android) to ensure comprehensive testing on various devices.
Smart Test Execution: Uses AI algorithms to optimize test execution, focusing on critical areas or scenarios based on historical data.
Real Device and Emulator Testing: It supports testing on real devices and emulators, with AI capabilities to adapt tests for different testing environments.
Behavior-Driven Testing: Appvance IQ’s support for behavior-driven testing helps align testing efforts with user expectations and business goals.
Comprehensive Testing Solution: The platform addresses both functional and performance testing requirements, providing a holistic testing solution for different aspects of applications.
Best Suited For:
Organizations with a user-centric focus and a desire to ensure that testing efforts closely mirror real-world user interactions by testing across various browsers and platforms can opt for Appvance IQ over the other listed AI Automation Testing Tools.
10. Test.ai
The final tool in our list of Top Automation Testing Tools is Test.ai, an AI-driven testing platform that specializes in visual testing and user experience validations. Also, Test.ai aims to enhance the efficiency and effectiveness of testing processes, particularly with mobile applications.
Appium AI is a specific product by Test.ai that integrates with the Appium framework, a widely used open-source tool for automating mobile applications. Appium AI introduces AI capabilities to Appium, offering advanced features for mobile app testing.
Key Features
Dynamic Test Scenarios: The tool aims to create dynamic and adaptive test scenarios that can adjust to changes in the mobile application’s user interface.
Usability Testing: With its emphasis on visual testing, the tool contributes to usability testing, ensuring that the application is visually appealing and user-friendly.
Self-Learning Test Automation: Test.ai’s approach includes self-learning capabilities, where the tool learns from interactions and adjusts test scenarios accordingly. This adaptability helps in maintaining tests as the application evolves.
Integration Capabilities: Integration with existing mobile app testing frameworks, including Appium.
Best Suited for:
Test.ai’s AI automation tool is particularly well-suited for organizations involved in mobile app development and testing. It can be applied in scenarios where rapid changes occur in the application, and a high degree of automation efficiency is desired.
Conclusion
We are very sure new tools will be released even after this blog is published. Make sure to comment about the best AI automation testing tools you’ve used as we will be constantly updating this blog to keep up with the latest tools. Always remember that Artificial Intelligence works best when coupled with Human Intelligence. As an automation testing company, we have always used the approach when it comes to using automation in our testing. So no matter what tool is available, it all comes down to how you use them.
Although Selenium is the most popular open-source tool for the automation testing of web applications, Playwright has been gaining much popularity as well. As the Page Object Model approach is widely used while creating test automation frameworks, we wanted to write an easy guide that can help everyone with the Playwright Page Object Model implementation. Being an experienced automation testing company, we started our test automation journey with Selenium. Since we’re always focused on being ahead of the curve, we have successfully implemented Playwright in numerous of our projects as well. So we will be exploring how to use Playwright effectively by applying Pages creation, Method implementation, and Locators.
Before heading to the Playwright Page Object Model Implementation, let’s see a brief intro of what it is, how it works, and the benefits it brings to the table.
What is the Page Object Model (POM)?
Page Object Model can be simply termed a design pattern that is used to improve the maintainability and reusability of your test automation scripts. It is achieved by encapsulating UI elements and interactions into separate classes called Page Objects.
How Does POM Work?
1.Page Objects: Each web page or component is represented by a Page Object, which contains the methods to interact with the elements on that page.
2.Reusable Components: Page Objects are designed for reuse across multiple test cases, reducing redundancy and promoting code efficiency.
3.Readability and Maintainability: Test scripts become more readable as they interact with the application through the methods provided by Page Objects. Additionally, maintenance becomes easier as changes to the UI are isolated within the corresponding Page Objects.
Benefits of Page Object Model:
Let’s take a look at the benefits we can reap by implementing the Page Object Model in Playwright or in general with any tool.
1. The Page Object Model facilitates the scaling of test suites by providing a structured approach to organizing test code.
2. By encapsulating UI interactions within Page Objects, changes to the UI can be made without impacting the entire test suite.
3. Page Objects can be reused across different test cases, promoting code efficiency and reducing duplication.
4. If there are any changes to the UI or even the functionality of a page, you only need to update the corresponding page object instead of modifying multiple test scripts, making maintenance easier.
To enable easy understanding, we have broken down the full process into small steps that you can follow. You can also quickly navigate through the blog by clicking on the specific step you need help with.
1. Download Node.js and install it by following the specified instructions.
2. Once installed, open a terminal or command prompt.
3. Type node -v and press Enter to check if Node.js is installed correctly. If it has been installed correctly, you should see the version number.
Step 2: Install the Required Libraries
As a next step in our Playwright Page Object Model implementation, you have to install the following libraries using Node Package Manager.
npm i -D @playwright/test
npm i -D playwright
npx playwright install
Note: Make sure to run this command in your project root directory.
Step 3: Install Cucumber
We generally follow the BDD approach as we’ve always found it to be the most effective while collaborating with our clients. And the BDD tool of our choice is Cucumber. You can install it using the below command.
After executing this command, the ‘package.json’ file will be updated to include the dependencies as shown below.
Note: Extensions such as ‘Cucumber’, ‘Cucumber (Gherkin)’, and ‘Playwright tests’ for VS Code need to be added. Please refer to the attached screenshot below.
Step 4: Create the Configuration File
Now that all the setup and prerequisite steps of the Playwright Page Object Model implementation are done, let’s see how to create the configuration file. The configuration file named cucumber.conf.js at the root level of the project is required to run our test script using Cucumber. You can use the below code to create it.
Code:
const { Before, BeforeAll, AfterAll, After, setDefaultTimeout } = require("@cucumber/cucumber");
const { chromium } = require("playwright");
const fs = require('fs');
setDefaultTimeout(60000); //Default timeout
// Launch the browser
BeforeAll(async function () {
global.browser = await chromium.launch({
headless: false,
slowMo: 1000,
browserContextOptions: {
viewport: null,
},
});
const context = await browser.newContext();
page = await context.newPage();
});
// Quit the browser
AfterAll(async function () {
await global.browser.close();
});
// Take a screenshot for each scenario
After(async function (testCase) {
const screenshotPath = `screenshots/${Date.now()}_${testCase.result.status}.png`;
await global.page.screenshot({ path: screenshotPath });
});
In the provided code snippet, we’ve implemented the browser configuration setup along with hook concepts. By using the ‘BeforeAll’ annotation, the browser will be launched and made available for the entire execution. Once the execution is complete, the browser will be closed according to the configuration set in the ‘AfterAll’ hooks.
Step 5: Creating a New Feature File
The next step in our Playwright Page Object Model implementation is to create a new feature file. First, you have to create a file named DemoLogin.feature within the ‘tests/acceptance/features’ directory as shown below.
Since we’re following the BDD approach, we’ll start by creating a feature file in the Gherkin language.
Here’s a simple syntax example of what a feature file looks like:
Step 6: Creating a Step Definition
Next up, we have to create a Step Definition in our Playwright Page Object Model implementation process. We need to create a Context file named DemoLoginSteps.js inside the tests/acceptance/stepDefinitions directory using the below command,
npm run test:e2e tests/acceptance/features/DemoLogin.feature
Note: It will be generate the step definition
Using above-mentioned snippet, we will add steps in the DemoLoginStep.js file
We have to create a context file named DemoLoginSteps.js inside the tests/acceptance/stepDefinitions directory and add it to the following script in your package.json file.
“–require tests/acceptance/stepdefinitions/*.js” specifies that the test should require all JavaScript files (*.js) in the tests/acceptance/stepdefinitions/ directory. These are the likely step definition files that define the behavior of the steps in the Cucumber scenarios.
Step 7: Playwright POM Implementation
Now we’re at the final stage of the Playwright Page Object Model implementation process.
First up, create a folder named “pages” at the project level.
Use this folder to store classes or modules that represent various web pages or components within an application.
Inside this “pages” folder, create .js files named loginPage.js, and homePage.js</> for better clarity.
These files encapsulate the functionality and elements specific to the respective pages, facilitating easier interaction and testing of the functionality.
Define the web elements and Methods for the two pages we’ve created (i.e.) LoginPage and HomePage.
In the above snippet, we are maintaining the web elements in the Loginpage.js file.
We’ve created test scripts as functions and now we want to use these functions in our step definitions. We’ve also defined our web pages using the ‘require’ keyword in Step definition. Additionally, we’re using a page instance to ensure that the browser instance is shared across all pages.
So we have implemented the Playwright Page Object Model for the Login and Home Page by specifying the methods and objects in the js files.
Execute the test scripts specifically for a feature file named DemoLogin.feature, which is located in the tests/acceptance/features/ directory by using the below-mentioned command.
<npm run test:e2e tests/acceptance/features/DemoLogin.feature
Note: The browser will open and execute all the scenarios defined in the feature file.
Conclusion:
We hope you now have a clear understanding of the Playwright Page Object Model implementation by adhering to best practices and design patterns. We’ve additionally explored the advantages of utilizing the Page Object Model (POM). If the process of adding new scripts is time-consuming, it could indicate a lack of reusable scripts or that you’re in the initial stages of implementing automation testing for your project. Being a leading test automation service provider, we always implement the Page Object Model in our projects and hope you will do so as well.
![getByText](https://codoid.com/wp-content/uploads/2024/08/getByText-2.png" "getByText")
![getByPlaceholder](https://codoid.com/wp-content/uploads/2024/08/getByPlaceholder-2.png" "getByPlaceholder")
![getByAltText](https://codoid.com/wp-content/uploads/2024/08/getByAlttext-2.png" "getByAltText")
![getByTitle](https://codoid.com/wp-content/uploads/2024/08/getByTitle-2.png" "getByTitle")
