Versions & browsers (Test Automation)

Why This Matters

Test automation plays a vital role in modern software development by ensuring applications work as intended across various versions and browsers. It saves time, reduces human error, and maintains high-quality software for continuous integration/continuous deployment (CI/CD) pipelines and regression testing. In this tutorial, we will delve into test automation using popular tools like Selenium, Cypress, and Playwright with JavaScript examples.

Prerequisites

To follow this tutorial, you should have a basic understanding of JavaScript, HTML, and CSS. Familiarity with at least one test automation tool like Selenium, Cypress, or Playwright is beneficial but not required as we will cover the essentials in this lesson. Additionally, it's recommended to have Node.js installed on your system since both Cypress and Playwright are built on top of it.

Core Concept

Test Automation Tools

• Selenium: An open-source test automation framework that supports multiple programming languages, including JavaScript through WebDriverJS. Selenium allows you to control a web browser programmatically and execute tests across various browsers and versions.

• Cypress: A modern end-to-end testing solution for web applications built on Node.js. Cypress provides real-time reloading, snapshot testing, and intelligent waiting that makes it easier to write reliable tests.

• Playwright: A Node.js library developed by Microsoft that offers cross-browser testing capabilities similar to Selenium but with faster performance and better support for modern web technologies like Chromium, Firefox, and WebKit.

Test Automation Lifecycle

1. Setup: Initialize the test automation tool and configure it with necessary details like browser type, URL, and test suite.
2. Navigation: Navigate to the desired pages or perform actions on existing pages.
3. Assertions: Verify that the application behaves as expected by making assertions about the page's state, such as checking for specific elements or values.
4. Tear Down: Clean up resources and close the browser after completing the test.

Worked Example

We will create a simple test automation script using Selenium WebDriverJS that verifies if a webpage contains the correct title and displays the expected text for an element with a specific id.

const {Builder, By, Key, until} = require('selenium-webdriver');

async function testExample() {
let driver = await new Builder().forBrowser('chrome').build();

try {
await driver.get('http://example.com');

// Wait for the page to load completely
await driver.wait(until.titleIs('Expected Title'), 10000);

let title = await driver.getTitle();
if (title === 'Expected Title') {
console.log('Test passed');
} else {
console.log('Test failed: Expected title is not as expected');
}

// Find the element with id "example-element" and get its text
let element = await driver.findElement(By.id('example-element'));
let text = await element.getText();

if (text === 'Expected Text') {
console.log('Test passed');
} else {
console.log('Test failed: Expected text is not as expected');
}
} catch (error) {
console.error(`Error occurred: ${error}`);
} finally {
await driver.quit();
}
}

testExample();

Cypress Example

Here's a similar example using Cypress that verifies if a webpage contains the correct title and displays the expected text for an element with a specific class name:

describe('Test example', () => {
it('Verifies page title and element text', () => {
cy.visit('http://example.com');

// Wait for the page to load completely
cy.title().should('eq', 'Expected Title');

// Find the element with class "example-class" and get its text
cy.get('.example-class').then((element) => {
const text = element.text();
expect(text).to.equal('Expected Text');
});
});
});

Playwright Example

Finally, here's a Playwright example that navigates to a login page, enters valid credentials, and verifies if the user is successfully logged in:

const { chromium } = require('playwright');

(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();

// Navigate to the login page
await page.goto('http://example.com/login');

// Fill in the username and password fields
await page.fill('#username', 'valid_username');
await page.fill('#password', 'valid_password');

// Click the login button
await page.click('#login-button');

// Wait for the page to load after logging in
await page.waitForSelector('.welcome-message');

// Verify that the welcome message is displayed
const welcomeMessage = await page.$eval('.welcome-message', (element) => element.textContent);
expect(welcomeMessage).toContain('Welcome, valid_username!');

await browser.close();
})();

Common Mistakes

1. Forgetting to import necessary modules: Ensure that you have imported the required dependencies for your test automation tool, such as selenium-webdriver, cypress, or playwright.
2. Not waiting for page elements: Test automation scripts often require waiting for page elements to load before performing actions on them. Failure to wait can lead to errors and incorrect test results.
3. Hardcoding element selectors: Hardcoding element selectors makes tests brittle and prone to failure when the structure of the webpage changes. Use CSS selectors or dynamic locators instead.
4. Ignoring browser compatibility issues: Test automation scripts should be run on multiple browsers and versions to ensure that the application works correctly across different environments.
5. Not handling exceptions gracefully: Properly handle exceptions in your test automation script to prevent crashes and improve the stability of your tests.

Common Mistakes (Playwright Subsection)

1. Not setting up global Playwright configuration: To run multiple tests with shared browser contexts, set up global Playwright configuration using playwright.init().
2. Ignoring network requests: Use the intercept method to intercept and inspect network requests during test execution.
3. Not cleaning up resources: Ensure that you close browsers and clear cookies after each test run to avoid conflicts between tests.

Practice Questions

1. Write a Cypress test that verifies if a webpage contains the correct title and displays the expected text for an element with a specific class name.
2. Modify the Selenium example to use Firefox as the browser instead of Chrome.
3. Create a Playwright test that navigates to a login page, enters valid credentials, and verifies if the user is successfully logged in using the intercept method to inspect network requests.
4. (Playwright) Write a test that checks for broken links on a webpage by inspecting network responses and asserting their status codes.

FAQ

1. Why should I use test automation? Test automation helps save time, reduce human error, and maintain high-quality software for continuous integration/continuous deployment (CI/CD) pipelines and regression testing.
2. What are some popular test automation tools? Some popular test automation tools include Selenium, Cypress, and Playwright. Each tool has its strengths and weaknesses, so choosing the right one depends on your specific needs and preferences.
3. How can I make my tests more reliable? To make your tests more reliable, use dynamic locators instead of hardcoding element selectors, properly handle exceptions, and wait for page elements to load before performing actions on them.
4. What is the difference between Selenium and Cypress? Selenium is a popular open-source test automation framework that supports multiple programming languages, while Cypress is a dedicated end-to-end testing solution for web applications built on Node.js. Cypress provides real-time reloading, snapshot testing, and intelligent waiting features that make it easier to write reliable tests.
5. Why should I use Playwright instead of Selenium? Playwright offers faster performance, better support for modern web technologies like Chromium, Firefox, and WebKit, and more intuitive API compared to Selenium. However, Selenium has a larger community and more extensive documentation, making it a popular choice among developers.