XQA
Back to Test Automation
2026-02-038 min read

Without parallelization (Test Automation)

Learn Without parallelization (Test Automation) step by step with clear examples and exercises.

Why This Matters

Test automation plays a crucial role in ensuring software quality and reducing manual testing efforts. In this guide, we'll delve deeper into test automation using popular JavaScript-based tools like Selenium, Cypress, and Playwright without parallelization. Automating tests can save significant time and resources in the development lifecycle, allowing for quicker feedback on code changes and improved overall quality. Understanding how to set up test automation is essential for developers and testers alike. In this guide, we'll cover the core concepts, worked examples, common mistakes, practice questions, and frequently asked questions to help you master test automation with JavaScript.

Prerequisites

Before diving into test automation, it's essential to have a good understanding of:

  1. JavaScript fundamentals (variables, functions, loops, etc.)
  2. HTML and CSS basics
  3. Familiarity with browser development tools (Chrome DevTools, Firefox Developer Edition)
  4. Basic understanding of testing principles and methodologies
  5. Knowledge of Node.js and npm for managing project dependencies
  6. Experience in writing unit tests using frameworks like Jest or Mocha
  7. Familiarity with Git for version control (optional but recommended)
  8. Understanding of Continuous Integration/Continuous Deployment (CI/CD) pipelines (optional but beneficial)

Core Concept

Test automation involves writing scripts that simulate user interactions with a web application to verify its functionality. These tests can be executed repeatedly to ensure consistency and accuracy in the results. Test automation is particularly useful for repetitive tasks, regression testing, and smoke testing. By automating these tasks, developers can save time and resources, allowing them to focus on more complex aspects of software development.

JavaScript is a popular choice for test automation due to its wide browser support, ease of use, and integration with various testing frameworks like Selenium, Cypress, and Playwright. JavaScript's native support in web browsers makes it an ideal choice for testing web applications, as the tests can be executed directly within the browser environment.

Selenium (Expanded)

Selenium is one of the oldest and most widely used test automation frameworks. It supports multiple programming languages (Java, C#, Python, Ruby, etc.) and browsers. Selenium consists of two main components: WebDriver for controlling the browser and TestNG or JUnit for writing tests. Selenium allows developers to simulate user interactions like clicking buttons, filling out forms, and validating page content.

Selenium Setup (Expanded)

To set up a Selenium project, first install the necessary dependencies:

  • Install WebDriver for your chosen browser (e.g., ChromeDriver, GeckoDriver): npm install webdriver-manager
  • Run the WebDriver manager to download and install the appropriate driver for your operating system: webdriver-manager update
  • Create a new JavaScript file for your tests
  • Include the Selenium WebDriver library by adding the following line at the top of your test file: const {Builder, By, Key, until} = require('selenium-webdriver');
  • Use the Builder class to create a new instance of the desired browser and navigate to the target URL:
let driver = await new Builder().forBrowser('chrome').build();
await driver.get('http://your-app-url.com');

Cypress (Expanded)

Cypress is a newer JavaScript-based end-to-end testing framework that focuses on providing a faster and more reliable testing experience. It automatically rewrites your application's code to make it testable, making setup and maintenance easier. Cypress also includes a real-time reloading feature, which allows you to see the changes in your tests as you modify the application. Additionally, Cypress provides features like network interception, screenshot comparisons, and accessibility testing.

Cypress Setup (Expanded)

To set up a Cypress project, follow these steps:

  1. Install Cypress: npm install cypress
  2. Create a new spec file (.spec.js) in the cypress/integration folder.
  3. Write your test:
describe('Basic Test', () => {
it('Visits the app and checks title', () => {
cy.visit('http://your-app-url.com')
cy.title().should('include', 'Your App Title')
})

it('Fills out a form and submits', () => {
cy.get('#formInput').type('Test Data') // replace with actual selector for your form input field
cy.get('#submitButton').click() // replace with actual selector for your submit button
cy.url().should('include', '/thank-you') // replace with the expected URL after submission
})
})
  1. Run your test: npm run cypress open

Playwright (Expanded)

Playwright is another modern JavaScript testing library developed by Microsoft. It supports multiple browsers (Chromium, Firefox, WebKit) and provides features like network interception, screenshot comparisons, and accessibility testing. Playwright also offers a simpler API compared to Selenium, making it easier for developers to get started with test automation.

Playwright Setup (Expanded)

To set up a Playwright project, follow these steps:

  1. Install Playwright: npm install playwright
  2. Write your test script using Playwright functions:
const { chromium, Browser, Page } = require('playwright');

(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('http://your-app-url.com');
// Add your test logic here
})();
  1. Run your test: npx playwright test

Worked Example

In this section, we'll walk through a simple example using Cypress to automate tests for a basic web application.

  1. Install Cypress: npm install cypress
  2. Create a new spec file (.spec.js) in the cypress/integration folder.
  3. Write your test:
describe('Basic Test', () => {
it('Visits the app and checks title', () => {
cy.visit('http://your-app-url.com')
cy.title().should('include', 'Your App Title')
})

it('Fills out a form and submits', () => {
cy.get('#formInput').type('Test Data') // replace with actual selector for your form input field
cy.get('#submitButton').click() // replace with actual selector for your submit button
cy.url().should('include', '/thank-you') // replace with the expected URL after submission
})

it('Checks the thank-you page content', () => {
cy.contains('Thank you for your submission!') // replace with actual content on the thank-you page
})
})
  1. Run your test: npm run cypress open

Common Mistakes

  1. Not waiting for elements to load: Always use Cypress commands like cy.get(), cy.wait(), and cy.contains() to ensure that the elements you're interacting with are fully loaded before performing any actions on them.
  2. Ignoring error messages: Pay attention to error messages in the Cypress test runner, as they can provide valuable insights into issues with your tests or application.
  3. Not using cy.wrap() for iframes: When testing web applications that use iframes, make sure to use the cy.wrap() command to access and interact with elements within those frames.
  4. Not handling asynchronous operations correctly: Use Cypress commands like cy.then(), cy.fixture(), and cy.request() to handle asynchronous operations properly in your tests.
  5. Ignoring browser-specific issues: Be aware that different browsers may have unique quirks or behaviors that can affect test results. Test your application across multiple browsers to ensure compatibility.
  6. Not using assertions effectively: Make sure to use appropriate assertions (like cy.should() and expect()) to verify the expected outcome of each test case.
  7. Ignoring test maintenance: Regularly update and maintain your tests as your application evolves to ensure they continue to provide accurate feedback on code changes.
  8. Not using fixtures for test data: Store test data in fixtures (JSON files) within your test project directory. Use Cypress commands like cy.fixture() to load the data into variables and use them in your tests. You can also generate test data programmatically using libraries like Faker or Data Factory.
  9. Not using custom commands: Create custom Cypress commands to encapsulate common actions, making your tests more readable and maintainable.
  10. Ignoring network requests: Use the cy.intercept() command to intercept and inspect network requests during testing. This can help you verify that the correct data is being sent and received by your application.

Practice Questions

  1. How can you write a test to verify that a form submission is successful using Selenium?
  • Use the findElement() method to locate the form and submit button, then use the sendKeys() method to fill out the form and click the submit button. Verify that the page contains the expected success message or redirects to the correct URL.
  1. What steps would you follow to set up Playwright for testing a web application written in React?
  • Install Playwright using npm (npm install playwright). Write your test script using Playwright functions, then run the tests using the Playwright CLI (playwright test). Make sure to include any necessary setup steps, such as starting a server for your application.
  1. Explain how to handle popups and alerts during test automation with Cypress.
  • Use the cy.on() method to listen for events like 'window:alert' or 'window:prompt'. You can then assert on the contents of the alert or prompt and take appropriate action (like clicking OK or entering a value).
  1. How would you create a custom command in Cypress?
  • Create a JavaScript file within your project's cypress/support folder, then define your custom command using the Cypress.Commands.add() method:
Cypress.Commands.add('login', (username, password) => {
cy.visit('/login')
cy.get('#username').type(username)
cy.get('#password').type(password)
cy.get('#submitButton').click()
})

Now you can use the login() command in your tests:

it('Logs in with valid credentials', () => {
cy.login('testuser', 'testpassword')
// Add additional assertions or actions after successful login
})
  1. How do you handle test data for your automated tests in Cypress?
  • Store test data in fixtures (JSON files) within your test project directory. Use Cypress commands like cy.fixture() to load the data into variables and use them in your tests:
const userData = cy.fixture('userData.json')
cy.login(userData.username, userData.password)
  1. How can you create a custom assertion in Cypress?
  • Create a JavaScript file within your project's cypress/plugins folder, then define your custom assertion using the before() method:
export default function (on, config) {
on('before:browser:launch', (browser, launchOptions) => {
const customAssertion = async (subject, assertionName, expectedValue) => {
// Add your custom assertion logic here
if (/* Your custom assertion logic */) {
return { passed: true }
} else {
return { passed: false, message: `Expected ${assertionName} to equal ${expectedValue}` }
}
}

Cypress.Commands.add('customAssert', customAssertion)
})
}

Now you can use the customAssert() command in your tests:

it('Tests a custom assertion', () => {
cy.get('#element').should('have.customAssert', 'Expected Value')
})

FAQ

  1. Why should I use JavaScript for test automation instead of other languages like Python or Java?
  • JavaScript is natively supported by web browsers, making it an ideal choice for testing web applications. JavaScript libraries like Selenium, Cypress, and Playwright offer easy setup and integration with popular development tools. Additionally, JavaScript is a versatile language that can be used for both front-end and back-end development, making it a convenient choice for full-stack developers.
  1. What are the advantages of using Cypress over Selenium?
  • Cypress offers faster test execution times due to its built-in rewriting of your application's code for testing purposes. This results in less overhead and quicker feedback on tests. Additionally, Cypress includes features like real-time reloading, automatic waiting, and network interception that simplify the setup and maintenance of
Without parallelization (Test Automation) | Test Automation | XQA Learn