DEV Community: Bonnie

How to Use Node.js Test Runner: A Detailed Guide

Bonnie — Fri, 17 Jan 2025 09:00:36 +0000

The JavaScript test runner or Node.js test runner helps automate the testing process for websites and web applications by enabling a range of testing techniques, including unit, integration, and end-to-end testing.

The Node.js test runner automates running tests and offers feedback on the results to help identify and resolve bugs during the stages of software development effectively.

In this blog, we look at how to leverage Node.js test runner for automated testing while exploring methods such as mocking and parallel testing alongside test hooks.

What Is Node.js Test Runner?

Programming languages like Python, Ruby, and Go had a built-in test runner, but JavaScript did not have one. All test runners in the JavaScript ecosystem, such as Mocha, Jest, and Jasmine, were built as third-party packages.

All this changed when Node.js released an experimental built-in test runner in Node.js version 18 and made the test runner stable in Node.js version 20.

The test runner offers several features, such as:

Assertion library
Test hooks
Mocking functionality
Code coverage
Test reporters
Asynchronous testing

Why Use Node.js Test Runner?

The native test runner in Node.js provides several advantages for JavaScript automation testing. Outlined below are some of the benefits of utilizing this test runner:

The test runner streamlines the testing process for developers and testers by saving time in deciding which tool to use, as it is integrated within Node.js itself.
The built-in assertion library in the Node.js test runner simplifies the process of writing tests and obtaining test results without the need to install other assertion libraries.
The test runner includes a feature for code coverage to make sure that all sections of the code are tested by pinpointing the parts that have not been tested yet.
The native test runner has a feature called watch mode that allows it to monitor changes in test files and their dependencies. If any changes are detected, the test runner will automatically rerun the tests affected by the modification.
Testing using Node.js enables the use of mocks, stubs, and spies that are important for testing individual components in isolation from the entire software.

How to Get Started With Node.js Test Runner?

In this part of the blog post, you will learn how to start using the Node.js built-in test runner and run your testing script successfully.

To get started, follow these instructions;

Make sure to use Node.js version 20 or above because the test runner has been completely integrated into the core of Node.js since the release of version 20.
Create a TestRunner directory and launch it using your Integrated Development Environment (IDE). For instance, in this scenario, we have used VS Code.

Run the following command in the terminal to set up a Node.js project:

    npm init -y

Create two new folders named src and tests in the TestRunner directory.

Update the test script in your package.json file with the following code snippet:

    "scripts": {
        "test": "node --test TestRunner/tests/"
      },

Install Selenium WebDriver by running the command below:

    npm install selenium-webdriver

Run the below-given command to install ChromeDriver:

npm install chromedriver

Create a new started.test.js file in the tests folder. Then, add the following code to the file:

`
const { Builder, By, Key, until } = require("selenium-webdriver");
const assert = require("assert").strict;
const { test } = require("node:test");

{
  let driver;


  test("Setup WebDriver for Google Search Test Suite", async (t) => {
    driver = await new Builder().forBrowser("chrome").build();
  });


  test("Navigate to Google and verify title", async (t) => {
    await driver.get("http://www.google.com");
    const title = await driver.getTitle();
    assert.strictEqual(title, "Google");
  });


  test("Cleanup after Google Search Test Suite", async (t) => {
    await driver.quit();
  });
}

The above code imports the required functions from node:test and node:assert and describes a simple test that navigates to Google and verifies the title.

Run the below-given command to execute the test:

node tests/started.test.js

Using describe() and it() Blocks

In Node.js test runner, you can use describe() and it() blocks to run tests. The describe() block is used to declare a suite that organizes and groups related tests together, while the it() block is used to declare a test.

The benefit of using describe()/it() blocks is that it provides a way to organize your tests into blocks of related functionality or features. This is useful for larger test suites, where you want to keep tests neatly organized and logically grouped.

Inside a describe() block, you can have multiple test() or it() blocks that define specific test cases. You can also nest describe() blocks within each other to create sub-groups of tests for more detailed organization.

You can write tests using describe() and it() blocks, as shown below.

Create a describeit.test.js file within the tests directory and insert the provided code snippet below:

`
describe("Form Input Test", async () => {
let driver;

  await it("Setup WebDriver", async () => {
    driver = await new Builder().forBrowser("chrome").build();
  });


  await it("should input values in a form and check their sum", async () => {
    await driver.get("https://www.lambdatest.com/selenium-playground/simple-form-demo");


    await driver.findElement(By.id("sum1")).sendKeys(2);
    await driver.findElement(By.id("sum2")).sendKeys(3);
    await driver.findElement(By.xpath("//button[normalize-space()='Get Sum']")).click();


    let sum = await driver.wait(until.elementLocated(By.id("addmessage")),10000);
    let sumNo = await sum.getText();
    assert.strictEqual(sumNo, "5");
  });


  await it("Cleanup: Close the browser", async () => {
    await driver.quit();
  });
});

Run the below-given command to execute the test:

node tests/describeit.test.js

Skipping Tests

The Node.js test runner also allows you to skip tests. You can skip tests if they are flaky, the feature being tested is under active development, the test is dependent on unavailable external dependencies, or tests are on deprecated features.

Individual tests can be skipped by passing the skip option to the test or by calling the test context’s skip() annotation. Annotations to avoid running the test in the built-in test runner consist of indicators, like skip:true, skip;’This test is skipped’, t.skip(), and t.skip(“This test is skipped”) as illustrated in this example.

Create a skipping.test.js file within the tests directory and insert the provided code snippet below.

`
describe("Expected Values To Be Strictly Equal", async () => {
let driver;
driver = await new Builder().forBrowser("chrome").build();
it("should be strictly equal", async () => {
await driver.get("http://www.google.com");
const title = await driver.getTitle();
assert.strictEqual(title, "Google");
});

  it("skip test option", { skip: true }, async (t) => {
    await driver.get("http://www.google.com");
    const title = await driver.getTitle();
    assert.strictEqual(title, "Google");
  });


  it(
    "skip test option with message",
    { skip: "This test is skipped" },
    async (t) => {
      await driver.get("http://www.google.com");
      const title = await driver.getTitle();
      assert.strictEqual(title, "Google");
    }
  );


  it("Calling skip() method", async (t) => {
    await driver.get("http://www.google.com");
    const title = await driver.getTitle();
    assert.strictEqual(title, "Google");
    t.skip();
  });


  it("Calling skip() method with message", async (t) => {
    await driver.get("http://www.google.com");
    const title = await driver.getTitle();
    assert.strictEqual(title, "Google");
    t.skip("This test is skipped");
  });


  await it("Cleanup: Close the browser", async () => {
    await driver.quit();
  });
});

Run the below-given command to execute the test:

node tests/skipping.test.js

Using Test Hooks

The Node.js test runner provides different test hooks. Hooks are functions that run immediately before or immediately after a test. The hooks available in the Node.js test runner are before(), beforeEach(), after(), and afterEach().

Here are some examples of how to use these hooks:

**before() *Hook*

The before() hook is used to prepare the testing environment where it runs once before all the tests in a describe block. For example, you can use the before() hook to set up the WebDriver before all your tests are executed.

Below is how to use the before() hook:

Create a beforehook.test.js file within the tests directory and insert the provided code snippet below:

`
describe("Simple Form Demo Title Test", async () => {
let driver;

  before(async () => {
    driver = await new Builder().forBrowser("chrome").build();
  });


  await it("should Navigate to Simple Form Demo and verify title", async () => {
    await driver.get("http://www.lambdatest.com/selenium-playground/simple-form-demo");
    const title = await driver.getTitle();
    assert.strictEqual(title, "Selenium Grid Online | Run Selenium Test On Cloud");
  });


  await it("Cleanup: Close the browser", async () => {
    await driver.quit();
  });
});

Run the below-given command to execute the test:

node tests/beforehook.test.js

**beforeEach() *Hook*

The beforeEach() hook runs once before each test, where it is used to isolate tests so they do not affect each other. For example, if you have to visit a specific page URL for a couple of tests, you can use a beforeEach() hook to open the URL page before each test is executed.

Below is how to use the beforeEach() hook:

Create a beforeEachhook.test.js file within the tests directory and insert the provided code snippet below:

`
describe("Simple Form Demo Test", async () => {
let driver;

  before(async () => {
    driver = await new Builder().forBrowser("chrome").build();
  });


  beforeEach(async () => {
    await driver.get("https://www.lambdatest.com/selenium-playground/simple-form-demo");
  });


  await it("should Navigate to Simple Form Demo and verify title", async () => {
    const title = await driver.getTitle();
    assert.strictEqual(title,"Selenium Grid Online | Run Selenium Test On Cloud");
  });


  await it("Should add values to simple form input fields and check their sum", async () => {
    await driver.findElement(By.id("sum1")).sendKeys(2);
    await driver.findElement(By.id("sum2")).sendKeys(3);
    await driver.findElement(By.xpath("//button[normalize-space()='Get Sum']")).click();


    let sum = await driver.wait(until.elementLocated(By.id("addmessage")),10000);
    let sumNo = await sum.getText();
    assert.strictEqual(sumNo, "5");
  });


  await it("Cleanup: Close the browser", async () => {
    await driver.quit();
  });
})

Run the below-given command to execute the test:

node tests/beforeEachhook.test.js

**after() *Hook*

The after() hook runs once after the execution of all the tests where it is used to perform cleanup actions after all the tests are executed. For example, if you want to close the WebDriver after the tests have been executed, you can use the after() hook.

Below is how to use the after() hook:

Create a afterhook.test.js file within the tests directory and insert the provided code snippet below:

`
describe("Simple Form Demo Test", async () => {
let driver;

  before(async () => {
    driver = await new Builder().forBrowser("chrome").build();
  });


  beforeEach(async () => {
    await driver.get(
      "https://www.lambdatest.com/selenium-playground/simple-form-demo"
    );
  });


  await it("should Navigate to Simple Form Demo and verify title", async () => {
    const title = await driver.getTitle();
    assert.strictEqual(
      title,
      "Selenium Grid Online | Run Selenium Test On Cloud"
    );
  });


  await it("Should add values to simple form input fields and check their sum", async () => {
    await driver.findElement(By.id("sum1")).sendKeys(2);
    await driver.findElement(By.id("sum2")).sendKeys(3);
    await driver
      .findElement(By.xpath("//button[normalize-space()='Get Sum']"))
      .click();


    let sum = await driver.wait(
      until.elementLocated(By.id("addmessage")),
      10000
    );
    let sumNo = await sum.getText();
    assert.strictEqual(sumNo, "5");
  });


  after(async () => {
    await driver.quit();
  });
});

Run the below-given command to execute the test:

node tests/afterhook.test.js

**afterEach() *Hook*

The afterEach() hook is run once after each test. It is used to perform cleanup actions after each test. For example, if you want to clear cookies after each test, you can use an afterEach() hook.

Create a afterEachhook.test.js file within the tests directory and insert the provided code snippet below:

`
const { Builder, By, Key, until } = require("selenium-webdriver");
const assert = require("assert").strict;
const {
describe,
it,
before,
beforeEach,
after,
afterEach,
} = require("node:test");

describe("Simple Form Demo Test", async () => {
  let driver;


  before(async () => {
    driver = await new Builder().forBrowser("chrome").build();
  });


  beforeEach(async () => {
    await driver.get(
      "https://www.lambdatest.com/selenium-playground/simple-form-demo"
    );
  });


  await it("should Navigate to Simple Form Demo and verify title", async () => {
    const title = await driver.getTitle();
    assert.strictEqual(
      title,
      "Selenium Grid Online | Run Selenium Test On Cloud"
    );
  });


  await it("Should add values to simple form input fields and check their sum", async () => {
    await driver.findElement(By.id("sum1")).sendKeys(2);
    await driver.findElement(By.id("sum2")).sendKeys(3);
    await driver
      .findElement(By.xpath("//button[normalize-space()='Get Sum']"))
      .click();


    let sum = await driver.wait(
      until.elementLocated(By.id("addmessage")),
      10000
    );
    let sumNo = await sum.getText();
    assert.strictEqual(sumNo, "5");
  });


  afterEach(function () {
    driver.manage().deleteAllCookies();
  });


  after(async () => {
    await driver.quit();
  });
});

Run the below-given command to execute the test:

node tests/afterEachhook.test.js

Implementing Mocks

The built-in mocking functionality of the Node.js test runner enables you to mock and substitute functions during testing situations where external dependencies or third-party packages are being used. It is particularly handy when those dependencies are still in the development phase.

You can use mocking functionality to create spies and stubs. Below is an example that illustrates using mocking functionalities to validate fetching data from an API:

First, install axios, a promise-based HTTP client for the browser and Node.js, using the below-given command:

npm install axios

Then, create an index.js file and add the following code:

`
const axios = require("axios");

class MakeRequest {
  constructor() {}
  static async fetchDataFromAPI(id) {
    const { data: todo } = await axios.get(
      "https://jsonplaceholder.typicode.com/todos/1"
    );
    return todo;
  }


  static slugifyTitle(todo) {
    const slug = `${todo.title.replace(/ /g, "-")}${todo.id}`;
    return { ...todo, slug };
  }


  static async addToDB() {
    let todo = await this.fetchDataFromAPI();
    todo = this.slugifyTitle(todo);
    return todo;
  }
}


module.exports = MakeRequest;

The code above implements a MakeRequest class, which has three functions fetchDataFromAPI(), slugifyTitle(), and addToDB().

Then, create a mock.test.js file and add the following code:

`
// Describing the tests related to mocking
describe("Mocking Tests", async () => {
// Resetting mocks before each test
beforeEach(() => mock.restoreAll());

    // Testing fetchDataFromAPI function to return a product
    it("fetchDataFromAPI should return a product", async (t) => {
      // Mocking the fetchDataFromAPI function to return a predefined product
      mock
        .method(MakeRequest, MakeRequest.fetchDataFromAPI.name)
        .mock.mockImplementation(async () => {
          return {
            userId: 1,
            id: 1,
            title: "delectus aut autem",
            completed: false,
          };
        });
      // Calling the function and asserting the returned product properties
      const res = await MakeRequest.fetchDataFromAPI();
      assert.strictEqual(res.userId, 1);
      assert.strictEqual(res.completed, false);
    });

    // Testing fetchDataFromAPI function to return a product with a given ID
    it("fetchDataFromAPI should return product with given ID", async (t) => {
      const id = 3;
      // Mocking the fetchDataFromAPI function to return a product with a given ID
      mock
        .method(MakeRequest, MakeRequest.fetchDataFromAPI.name)
        .mock.mockImplementation(async (id) => {
          return {
            userId: 1,
            id: id,
            title: "delectus aut autem",
            completed: false,
          };
        });
      // Calling the function with the provided ID and asserting the returned ID
      const res = await MakeRequest.fetchDataFromAPI(id);
      assert.deepEqual(res.id, id);
    });

    // Testing addToDB function to create a slug based on the title
    it("should create a slug based on the title", async (t) => {
      // Spy on the slugifyTitle method
      const slugSpy = mock.method(MakeRequest, "slugifyTitle");
      // Mocking the fetchDataFromAPI function to return a predefined product
      mock
        .method(MakeRequest, "fetchDataFromAPI")
        .mock.mockImplementation(async () => {
          return {
            userId: 1,
            id: 1,
            title: "delectus aut autem",
            completed: false,
          };
        });
      // Calling the addToDB function
      await MakeRequest.addToDB();
      // Getting the call information for slugifyTitle method
      const call = MakeRequest.slugifyTitle.mock.calls[0];
      // Asserting the number of calls made to slugifyTitle and fetchDataFromAPI
      assert.deepEqual(slugSpy.mock.calls.length, 1);
      assert.deepEqual(MakeRequest.fetchDataFromAPI.mock.callCount(), 1);
      // Asserting the created slug based on the title
      assert.strictEqual(call.result.slug, `delectus-aut-autem1`);
    });
  });

In the code above, the fetchDataFromAPI method is mocked from the MakeRequest class.

To prevent the function from making a network request, the mockImplementation() method is used to return a predefined output, which can be tested for specific values.

Finally, mock.method() is used to create a spy to test if the slugifyTitle() function is called. Also, how many times the function is called, and its output is tested based on the title.

Run the tests using the below-given command:

node tests/mock.test.js

Running Parallel Tests

Node.js test runner allows you to execute multiple tests in parallel and at the same time instead of running them sequentially.

To run tests in parallel in Node.js test runner, you need to pass the concurrency: true parameter as the second argument to the describe() function.

Below is an example of how to run tests in parallel using Node.js native test runner and Selenium using concurrency parameters.

Create a parallel.test.js file in the tests folder and add the following code:

`
describe("Ecommerce Site Tests", { concurrency: true }, async () => {
let driver;

    before(async () => {
  driver = await new Builder().forBrowser("chrome").build();

      await driver.get("https://ecommerce-playground.lambdatest.io/");
    });

    await it("should Navigate to ecommerce site and find an item", async () => {
      const title = await driver.getTitle();
      assert.strictEqual(title, "Your Store");
    });

    await it("should Navigate to ecommerce site and add item to cart", async () => {
      driver.findElement(By.xpath('//a[normalize-space()="Shop by Category"]')).click();

      driver.findElement(By.xpath('//span[normalize-space()="Phone, Tablets & Ipod"]')).click();

      driver.findElement(By.xpath('//div[@class="carousel-item active"]//img[@title="iPhone"]')).click();
    });

    afterEach(function () {
      driver.manage().deleteAllCookies();
    });

    after(async () => {
      await driver.quit();
    });
  });

Run the below-given command to run the test:

node tests/parallel.test.js

The above test executions are performed on the local grid. However, to scale your automation testing with Node.js, you can consider using a cloud-based testing approach.

AI-driven test execution platforms like LambdaTest let you run Node.js tests on a scalable automation cloud infrastructure, ensuring compatibility and reliability.

Conclusion

In summary, the Node.js test runner offers a lightweight solution for creating and executing automated tests in your web projects. Though it may not include all the functionalities found in popular testing frameworks, its straightforwardness and user-friendly nature make it an excellent option for beginning automated testing.

This blog discusses the features of the Node.js built-in test runner. It covers how to create tests using the describe() function and its syntax while making use of hooks for setup and teardown operations, as well as mocking and running tests in parallel threads concurrently for JavaScript code quality assurance and stability enhancement purposes.

For complex testing situations, you may want to evaluate the default test runner against popular frameworks such as Mocha, Jasmine, or Jest to determine which one best suits your requirements.

Using React Virtual DOM To Improve Web Application Performance

Bonnie — Tue, 23 May 2023 12:24:29 +0000

If you don’t know, HTML is the most widely used markup language for creating web pages supported by all major browsers like Google Chrome, Mozilla Firefox, and Safari. HTML elements are represented as a tree data structure on a browser by Document Object Model (DOM). When there is a change in the HTML document, the entire DOM is updated.

However, updating the whole DOM each time a change is made can negatively impact the web application’s performance and cause it to slow down.

This is where a virtual DOM can be leveraged to improve the web application’s performance whenever a change is made to HTML documents.

This blog on React Virtual DOM covers its advantages over the Core DOM and Shadow DOM. It explains how to create a Virtual DOM in JavaScript and how it can improve web application performance with dynamic content. The blog also explores how React uses the Virtual DOM and deep dives into running automated tests on a React Virtual DOM web application using Jasmine and cloud Selenium Grid.

Perform manual or automated cross browser test on 3000+ browsers online. Deploy and scale faster with the most powerful cross browser testing tool online.

What is a Virtual DOM?

In simple terms, Virtual DOM is a lightweight in-memory representation of a web page’s user interface (UI) or Core DOM. Many JavaScript frameworks and libraries, such as React, Angular, and Vue.js, use a virtual DOM.

Since manipulating or updating the Core DOM directly can make a web application slow, especially when there are frequent changes to the user interface, a Virtual DOM is used to improve its performance by avoiding unnecessary updates to the Core DOM.

When the user interface of a web application using a Virtual DOM is rendered for the first time, a version of a Virtual DOM is created as a copy of the Core DOM and stored in memory. Every time a change is made to the user interface, a new version of Virtual DOM is created.

Through a process called diffing, a JavaScript library or framework compares the new version of the Virtual DOM to the previous version and only updates the parts of the Core DOM that have changed.

Assume the user interface, or the Core DOM, is a real house. If you want to change the house, like changing the windows, you have to rebuild the house from the ground up. Rebuilding the house from the ground up every time a change needs to be made can be expensive and time-consuming.

Now take the small house on the top left below as the plan of the house. If you want to add new windows or change the house, you can ask an architect to draw a new plan with the new changes. Then you give the builders the new plan of the house, which they compare to the old plan to check the changes that need to be made to the house.

After confirming the new changes, they only make the changes to the house without rebuilding it from the ground up.

Advantages of using a Virtual DOM in a web application

Some of the advantages of using a Virtual DOM in a web application are:

Improved Performance
Better User Experience
Better CPU and Memory Consumption

Test native, hybrid, and web apps on any mobile OS with our free Android emulator online. Sign up to optimize app performance.

Understanding the Document Object Model (DOM)

The Document Object Model (DOM) is a programming language-neutral interface the browser creates when a web page is loaded. The DOM allows programs and scripts to dynamically access and update an HTML document’s content, structure, and style.

The DOM defines HTML elements as objects. Also, the DOM defines the properties of all HTML elements and methods to access all HTML elements. Moreover, the DOM defines events for all HTML elements.

Below is how the DOM defines HTML elements as objects.

There are three types of DOM:

Core DOM
Virtual DOM
Shadow DOM

Differences between the Core DOM, Virtual DOM, and Shadow DOM

Below are the key differences between the Core DOM, Virtual DOM, and Shadow DOM, even though they are all related to the DOM.

Core DOM

Core DOM is the real representation of HTML elements in a web page. When a change is made to the HTML document, the browser updates the Core DOM entirely.

When dealing with large and complex web applications, updating the Core DOM completely can make them slow and cause performance issues.

Here is how to view the Core DOM in a web application using inspect tools:

Open the web application in a browser.
Right-click on the home page and select Inspect, which will open the DevTools.
Under the Elements tab, the Core DOM tree of the web application is shown.

Virtual DOM

Virtual DOM is a lightweight version of the Core DOM. Virtual DOM keeps track of the changes made to the HTML documents.

When a change is made to the HTML documents, Virtual DOM checks the difference between the previous and new versions of the HTML document and only updates elements that have changed on the Core DOM

Here is how to view the Virtual DOM in a React web application using inspect tools and React Developer Tools:

Install the React Developer Tools extension on a browser.
Open the web application in a browser.
Right-click on the home page and select Inspect, which will open the DevTools.
The React Developer Tools extension adds a new tab to DevTools that allows you to view the Virtual DOM or component tree of the React web application.

Shadow DOM

Shadow DOM creates an isolated component by enclosing an HTML element and its CSS styles. It allows you to create a separate DOM for separate HTML elements without interfering with the main DOM.

Shadow DOM is used by HTML elements with their styles and behaviors.

Here is how to view the Shadow DOM in a web application using inspect tools:

Open the web application in a browser.
Right-click on the home page and select Inspect, which will open the DevTools.
Under the Elements tab, the Shadow DOM is shown by a #shadow-root.

Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorial around Selenium testing, Cypress testing, and more.

Test native, hybrid, and web apps on any mobile OS with our free Android online emulator. Sign up to optimize app performance.

How to create Virtual DOM in JavaScript?

In this section of this blog on using React Virtual DOM, we dive into how to create a React Virtual DOM and how to use a React Virtual DOM to improve the performance of a web application. To follow through with this section, you need a Text Editor and a Package Manager installed on your computer. In this case, I will use Visual Studio code as a Text Editor and NPM (Node Package Manager) as a Package Manager.

Step 1: Create a project folder called VirtualDOM.

mkdir VirtualDOM

Step 2: Open the project folder in a text editor and create a folder called src.

Step 3: Create three files named index.html, style.css, and *main.j*s in the src folder.

Step 4: Link the style.css and main.js files to the index.html file. Then create a root div with #app id.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="main.js"></script>
</body>
</html>

Step 5: Install a build tool called Parcel by running the command below on a command line.

npm install parcel

Step 6: Add the following code block to the package.json file.

"scripts": {
    "dev": "parcel src/index.html"
  },

Your package.json file should now look as shown below.

{
  "scripts": {
    "dev": "parcel src/index.html"
  },
  "dependencies": {
    "parcel": "^2.8.3"
  }
}

In the package.json file above, the scripts block defines a dev script that runs Parcel bundler with src.index.html file as the entry point. The Parcel is a web application bundler that bundles files and serves them on a server.

Step 7: Create a folder called vDom in the src folder.

Step 8: Create a file called createElement.js in the vDom folder.

In this article, we take a look at some aspects of simulation and discuss some ways through which we can use ios emulator for pc.

Step 9: A function called createElement is used in Virtual DOM libraries such as React. The function creates a new React Virtual DOM element that can be rendered to the web application UI or Core DOM.

For that reason, add the following code to the createElement.js file.

const createElement = (tagName, {attrs = {}, children = []} = {}) => {
    return{
        tagName,
        attrs,
        children,
    }
}

export default createElement;

In the code above, the createElement function that creates and returns a React Virtual DOM element object is defined.

The createElement function takes two arguments. The first argument is called tagName, while the second argument is an object containing two optional properties: attrs and children.

The tagName argument is a string representing the tag name of the React Virtual DOM element to be created, such as a div. The attrs property is an object that represents attributes to be applied to the React Virtual DOM element, such as class or id. The children property is an array of child Virtual DOM elements such as other React Virtual DOM elements.

Then the createElement function returns an object that contains tagName, attrs, and children properties.

Finally, the createElement function is exported so that it can be used by other files in the application.

Step 10: Add the following code to the main.js file to define the React virtual DOM.

import createElement from "./vDom/createElement";

const virtualApp = createElement('div', {
    attrs: {
      id: 'app',
    },
    children: [
      createElement('h1', {
        attrs: {
          class: 'title',
        },
        children: [
            String("Virtual DOM")
        ]
      }),
      createElement('img', {
        attrs: {
            src: "https://files.virgool.io/upload/users/16337/posts/ksazdszokx1s/hl1p9zzfuygi.png"
        }
      }),
    ],
});

In the code above, a React Virtual DOM tree is created using the createElement function imported from the createElement.js file.

The React Virtual DOM tree represents an HTML structure with a div element as the root node, with an id attribute set to the app.

The div has two child elements: an h1 element and an img element. The h1 element has a class attribute set to title and contains the string Virtual DOM as its child node. The img element has an src attribute set to a URL that points to an image file.

Step 11: Let us render the React Virtual DOM created to the Actual DOM. To do that, create a file called render.js in the vDom folder and add the following code to the file.

const renderElement = ({tagName, attrs, children}) => {
    const element = document.createElement(tagName);

    // set attributes
    for (const [k, v] of Object.entries(attrs)) {
        element.setAttribute(k, v);
    }

    // set children
    for (const child of children) {
        const $child = render(child);
        element.appendChild($child);
    }

    return element;
};

const render = (vNode) => {
    if (typeof vNode === 'string') {
        return document.createTextNode(vNode);
    }

    return renderElement(vNode);
}

export default render;

In the code above, a React Virtual DOM tree is rendered as real DOM elements.

The renderElement function takes an object representing a React Virtual DOM node as an argument, including the node’s tagName, attrs, and children properties.

Inside the renderElement function, a new DOM element with the specified tagName is created.

A for-loop is used to iterate over the attrs object to set each attribute on the newly created element using the setAttribute method.

A for-loop is used to iterate over the children array of React Virtual DOM nodes, recursively rendering each child node by calling the render function and appending it to the element using the appendChild method.

Finally, the renderElement function returns the newly created DOM element.

Get started with this complete Selenium automation testing tutorial. Learn what Selenium is, its architecture, advantages and more for automated cross browser testing.

The render function takes a React Virtual DOM node as an argument and checks if it’s a string node or a regular React Virtual DOM node. If the node is a string, the render function returns a text node with the string as its content.

If the node is a regular React Virtual DOM node, render calls the renderElement function to create and return the corresponding DOM element.

Step 12: So far, we have created a React Virtual DOM and rendered it to the Actual DOM. Now we need to display the Actual DOM on a web page. To do that, create a file called mount.js in the vDom folder and add the following code.

const mount = (node, target) => {
    target.replaceWith(node);
    return node;
};

export default mount;

In the code above, a React Virtual DOM node is mounted onto an Actual DOM node.

The mount function takes two arguments: node, which is the React Virtual DOM node to be mounted, and target, which is the Actual DOM node onto which the React Virtual DOM node should be mounted.

The function replaces the target node with the React Virtual DOM node using the replaceWith method. This effectively removes the original target node from the document and replaces it with the new React Virtual DOM node.

Finally, the function returns the React Virtual DOM node.

Step 13: In the main.js file, import render and mount functions. At the bottom of the main.js file, render and mount the React Virtual DOM.

import createElement from "./vDom/createElement";
import render from "./vDom/render";
import mount from "./vDom/mount";

const virtualApp = createElement('div', {
    attrs: {
      id: 'app',
    },
    children: [
      createElement('h1', {
        attrs: {
          class: 'title',
        },
        children: [
            String("Virtual DOM")
        ]
      }),
      createElement('img', {
        attrs: {
            src: "https://bit.ly/41CwZhy"
        }
      }),
    ],
});

const App = render(virtualApp);
mount(App, document.getElementById('app'));

Step 14: Run the command below on the command line.

npm run dev

Navigate to http://localhost:1234, and you should see the React Virtual DOM showing on the web page.

How does a Core DOM without a Virtual DOM affect a Web Application Performance?

Assume you are shopping in an online eCommerce store web application, and the items you had added to the cart are lost every three seconds. Other online shoppers get the same user experience and as a result, the online eCommerce store sales go down.

The owner of the online eCommerce store consults a web developer who determines that the online store web application HTML elements are reloading every three seconds because of a timer that shows how long some items on the e-commerce store are on offer.

When a web application’s data changes constantly and triggers an update, the user interface is re-rendered. Re-rendering the whole application every time a change happens can make it slow, perform poorly or give a bad user experience, especially if it is a complex web application such as an online eCommerce store.

In this section of the blog on using React Virtual DOM, you will learn how the real DOM affects a web application’s performance by following the steps below.

Step 1: Create a folder called WebApp, then add two files called index.html and main.js. After that, install the Parcel build tool, as shown in the section earlier.

Step 2: In the index.html file, add the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web App</title>
</head>
<body>
    <div id="root">

    </div>
    <script type="module" src="/main.js"></script>
</body>
</html>

In the code above, an empty div with a root id is created. Then the main.js file is imported using a script tag.

Step 3: In the main.js file, add the following code.

const update = () => {
    const element = `
      <h3>Real DOM Vs Virtual DOM</h3>
      <span>Time: ${new Date().toLocaleTimeString()}</span>
    `;

    document.getElementById("root").innerHTML = element;
};

setInterval(update, 3000);

In the code above, a function called update is created. Inside the function, a variable called the element is declared where it has the value of an h3 heading and a span that displays the current time using the JavaScript Date object.

Then the innerHTML property of the empty div in the index.html file is set to the value of the element variable.

Finally, the setInterval method sets up a timer that calls the update function every 3 seconds. As a result, the content of the root id div is updated with the current time every 3 seconds.

Step 4: Run the command below on the command line.

npm run dev

Step 5: Navigate to http://localhost:1234, and you should see the current time updating every 3 seconds, as shown below.

Step 6: When you inspect the HTML elements, you will realize that the root id div element and its child elements representing real DOM are updated or re-rendered from scratch every 3 seconds, as shown below.

Step 7: To see how updating or re-rendering all the HTML elements every time a change affects a web application’s performance, add a form input in the main.js file, as shown below.

const update = () => {
    const element = `
      <h3>Real DOM Vs Virtual DOM</h3>
      <form>
        <input type="text"/>
      </form>
      <span>Time: ${new Date().toLocaleTimeString()}</span>
    `;

    document.getElementById("root").innerHTML = element;
};

setInterval(update, 3000);

Step 8: As shown below, when you try to type something on the input field, you will realize that the value is lost every time the elements are updated or re-rendered every 3 seconds.

Run your Playwright test scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud. Read more.

How to use Virtual DOM to improve web application performance?

In this section of the React Virtual DOM blog, let us add a React Virtual DOM to the web application created in the section above to reduce unnecessary updates that affect its performance. The React Virtual DOM will only update or re-render the span element with the timer every three seconds instead of the whole web application element.

Step 1: In the WebApp folder created in the section above, run the command below on the command line to install ReactJS.

npm install react

Then run the command below to install ReactJS Virtual DOM.

npm install react react-dom

Step 2: Replace the code on the main.js file with the code below.

import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const update = () => {
  const element = (
    <>
      <h3>Real DOM Vs Virtual DOM</h3>
      <form>
        <input type="text" />
      </form>
      <span>Time: {new Date().toLocaleTimeString()}</span>
    </>
  );

  root.render(element);
};

setInterval(update, 3000);

In the code above, the React library renders a Real DOM and a React Virtual DOM. The import { createRoot } from “react-dom/client” statement imports the createRoot function from the react-dom/client module. This function creates a root-level component in a React application containing all the other components.
The const rootElement = document.getElementById(“root”) statement assigns the DOM element with the ID of “root” to the rootElement variable. This is where the root-level component created by createRoot will be rendered.
The const root = createRoot(rootElement) statement creates the root-level component using the createRoot function and assigns it to the root variable.
The const update = () => { … } statement defines a function called update that will be called every 3 seconds using the setInterval function. This function creates a new element using JSX syntax(<>), a syntax extension of JavaScript that allows you to write HTML-like code in your JavaScript files.
The root.render(element) statement renders the new element created in the update function to the root-level component created earlier.

Step 3: Run the command below on the command line which enables Parcel to bundle the web application and start a development server that listens on port number 1234 by default.

npm run dev

Navigate to http://localhost:1234, and inspect the HTML elements.

As you can see, only the span element with the timer updates or re-renders every three seconds instead of all the web application HTML elements.

Step 4: As shown below, when you type something on the input field, the value is not lost every time the timer is updated or re-rendered.

How React uses Virtual DOM to improve web application performance?

In React, the Virtual DOM is kept in memory as a virtual user interface representation. The React Virtual DOM is then synced with the DOM by a library such as ReactDOM in a process called reconciliation.

ReactDOM is a JavaScript library used with React to build a web application user interface that can render React components in the core DOM. When you create a web application user interface components using React, ReactDOM provides the methods needed to render these components to the browser.

These methods provided by ReactDOM include:

ReactDOM.render()
ReactDOM.unmountComponentAtNode()
ReactDOM.findDOMNode()
ReactDOM.createPortal()
ReactDOM.hydrate()

The ReactDOM.render() method takes a React component and mounts it into a DOM while ReactDOM.unmountComponentAtNode() method unmounts a React component from the DOM.

The ReactDOM.findDOMNode() method returns the underlying DOM node of a React component while ReactDOM.createPortal() method allows a React component to be rendered outside its parent DOM hierarchy.

The ReactDOM.hydrate() method is used to attach a React component to existing HTML content rendered by the server, known as Server Side Rendering (SSR) of React components.

When a web application is rendered for the first time, React uses the render() function to create a tree of React elements that act as a Virtual DOM. If the state of the web application changes, the render() function creates a new tree of React elements or Virtual DOM.

Then React compares the new Virtual DOM with the old version of the React Virtual DOM to determine which nodes have changed or have been updated. React then efficiently updates the user interface or the real DOM to match the new version of the React Virtual DOM.

To compare the new version of Virtual DOM with the old version of React Virtual DOM, React uses an algorithm called Diffing. When using the Diffing Algorithm, React first compares the type of the old and new versions of React Virtual DOM root HTML elements.

If the root elements are of different types, React will destroy the old version of the React Virtual DOM and build a new Virtual DOM from scratch. For example, if the old version of the React Virtual DOM root HTML element is a < div > and the new version of the Virtual DOM root HTML element is a < main > or < span >, the old version of the React Virtual DOM is destroyed.

If the root HTML elements of the old and new versions of the Virtual DOM are of the same type, React looks at their attributes, then keeps the old version of the React Virtual DOM and only updates the parts that have changed.

After handling the root HTML elements of the old and new versions of the Virtual DOM, React then recurses through their children’s HTML elements. When recursing through the children of the root HTML elements, React iterates both children’s HTML elements simultaneously and only updates HTML elements that have changed.

Here’s 295+ Selenium Interview Questions with Answers that will help you boost your confidence in an Interview.

Automated Geolocation Testing on a Virtual DOM web application using Jasmine and Cloud Selenium Grid

Jasmine is one of the most popular JavaScript-based testing frameworks. It is a Behavior-Driven Development (BDD) framework that provides a structure for developers to write tests. Jasmine tests are written in JavaScript and are typically run in a web browser or command line using a JavaScript runtime environment, such as Node.js.

LambdaTest is a digital experience testing platform that lets you perform automation testing with Jasmine and Selenium on a cloud Selenium Grid across 3,000+ different browsers and operating systems.

In this section of the React Virtual DOM tutorial, you will learn how to create and run automated geolocation tests that test whether a user can see their local time on a web application. We will test the geolocation on multiple browser versions and operating system combinations. We can use three browser versions and operating system combinations in this case.

These browser versions and operating system combinations are:

Chrome 108.0 + Windows 10
Safari 16.0 + macOS Ventura
Firefox 106.0 + Windows 11

To define your desired browser and operating system combinations, you can use LambdaTest Capabilities Generator.

How to generate Browser and Operating System combinations?

Step 1: On the Capabilities Generator Page, select the programming language you are using to run your tests. In this case, we use JavaScript and can select Node JS, a JavaScript framework.

Step 2: Select Selenium.

Then select Selenium version 4 on the right.

Step 3: Configure your capabilities by selecting a browser and browser version.

Step 4: Click Configure Advanced Capabilities and select the operating system.

Step 5: Scroll down to the Build Settings section and fill out the input fields as shown below.

Step 6: Scroll down to the test configuration section and fill out the input field as shown below.

Step 7: Scroll down to the geolocation and timezone section, then select the options as shown below.

On the right, you can now see the capabilities presented in a code format that you can copy and use in your test script.

Test Case Scenarios

In this case, we will run four geolocation tests. The first test will test if a user in New York, United States can see their local time. Below is the test case scenario.

Navigate to the collaboration platform.
Check whether the time shown is the same as New York’s local time.

The second test will test if a user in Berlin, Germany can see their local time. Below is the test case scenario.

Navigate to the collaboration platform.
Check whether the time shown is the same as Berlin’s local time.

The third test will test if a user in Nairobi, Kenya can see their local time. Below is the test case scenario.

Navigate to the collaboration platform.
Check whether the time shown is the same as Nairobi’s local time.

The fourth test will test if a user in Sydney, Australia, can see their local time. Below is the test case scenario.

Navigate to the collaboration platform.
Check whether the time shown is the same as Sydney’s local time.

Creating and Running Test Scripts

Due to many test scenarios and updates that might be made to the test code, Page Object Model can be used in test scripts. Page Object Model, also known as POM, is a design pattern used in software testing to create maintainable and readable automated test code.

POM creates an object for each web page in an application, and then page objects interact with the web page to perform actions such as filling out input fields, clicking buttons, or checking some text.

Step 1: Create a project folder called GeolocationTesting using the command below.\

mkdir GeolocationTesting

Step 2: Open the project folder in a text editor and create a spec folder.

Step 3: Create a pageModel and Geolocation folder in the spec folder, as shown below.

Step 4: Create four files called us.js, germany.js, kenya.js, and australia.js in the pageModel folder.

Step 5: Run the command below on the command line to install Jasmine in your project.

npm install — save-dev jasmine

Adding –save-dev to the command helps save the name and version of Jasmine in the dev-dependency object.

Step 6: Run the command below on the command line to initialize Jasmine in your project.

px jasmine init

Step 7: Configure the npm test script to run the Jasmine JS tests when the command npm test is executed. To do that, update the package.json file and add a script section, as shown below.

{
  "scripts": {
    "test": "jasmine"
  },
  "devDependencies": {
    "jasmine": "^4.6.0"
  }
}

Step 8: Install the latest version of the Selenium WebDriver in the project folder by running the command below on the command line.

npm install selenium-webdriver

Step 9: In the us.js file, add the following code.

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

const username= process.env.LT_USERNAME || "Username"
const accessKey=  process.env.LT_ACCESS_KEY || "Access Key"
var remoteHub = 'https://' + username + ':' + accessKey + '@hub.lambdatest.com/wd/hub';

const NewYorkCaps = {
    "browserName": "Chrome",
    "browserVersion": "108.0",
    "LT:Options": {
        "username": "Username",
        "accessKey": "Access Key",
        "geoLocation": "US",
        "platformName": "Windows 10",
        "timezone": "New_York",
        "build": "New York USA",
        "project": "Geolocation Testing",
        "name": "New York Local Time Test",
        "selenium_version": "4.0.0",
        "w3c": true
    }
}

const getElementById = async (driver, id, timeout = 8000) => {
    const el = await driver.wait(until.elementLocated(By.id(id)), timeout);
    return await driver.wait(until.elementIsVisible(el), timeout);
};

const seleniumDriver = new selenium.Builder().
usingServer(remoteHub).
withCapabilities(NewYorkCaps).
build();

const timeUrl = 'https://virtualdom.netlify.app/'

class Main {

    constructor() {
        this.driver = seleniumDriver;
        this.byId = getElementById;
        this.url = timeUrl;
        this.localTime = ('time');
    }

    async visit() {
        await this.driver.get(this.url);
    }

    async time() {
        const currentTime = await this.byId(this.driver, this.localTime);

        currentTime.getText().then(function(value) {
        expect(value).toBe(`Time: ${new Date().toLocaleTimeString()}.`);
        });
    }

    async before() {
        this.driver;
    }

    async quitB() {
        await this.driver.quit();
    }
}

module.exports = new Main();

Ace your Cypress interview with these 60+ Cypress interview questions. Boost you confidence and land your dream job with this comprehensive guide.

Code Walkthrough

Since we are using Selenium to run the tests, Selenium WebDriver, until, and By are imported using require function as shown below:

Variables username, accessKey, and remoteHub to be used in the test case are set.

Test capabilities are configured by passing browser, browser version, and operating system information with LambdaTest Selenium Grid Capabilities through the capabilities object.

An async function called getElementById with parameters driver, id, and timeout set to 8000 milliseconds is declared.

Inside the async function, declare a variable called el, where the variable value instructs the Selenium Driver to wait until the element with the targeted id is located on the registration page of the eCommerce website. The elementLocated() method is used here.

Below is how an element is located by the ID locator.

An object returned by the getElementById async function instructs the Selenium WebDriver to wait until the element we target by id is present on the DOM of the registration page and visible. Visibility means that the element is not only displayed but also has a height and width that is greater than zero. The elementIsVisible() method is used here.

A new instance of a Selenium WebDriver is initialized using the Builder design pattern.

The const declares a constant variable named seleniumDriver, which will hold the created Selenium WebDriver instance. The new selenium.Builder() creates a new instance of the Builder class provided by the Selenium library.

The usingServer(remoteHub) specifies the URL of a Selenium server to use, which is passed as the value of the remoteHub variable. This indicates that the WebDriver instance will be a remote one and not a local one.

The withCapabilities(NewYorkCaps) sets the capabilities of the WebDriver instance. The NewYorkCaps variable holds an object that defines the desired capabilities for this WebDriver instance. Capabilities are a set of key-value pairs that specify the browser, platform, and other settings that will be used by the WebDriver instance.

The build() creates and returns a new instance of a Selenium WebDriver, based on the previously set configuration. The new WebDriver instance is then assigned to the seleniumDriver constant variable.

Variable timeUrl is assigned the URL of the web application to be tested.

A JavaScript class called Main is created where the class has a constructor method, a special method called when an object of the class is created. The constructor method initializes the properties of the class.

A value of seleniumDriver is assigned to this.driver property, a value of getElementById to this.byId property, and a value of timeUrl to this.url property in this constructor method. Property this.localTime is assigned an ID selector value that will be used to find the local time in the web application.

To add the ID selector, navigate to the web application.

The Async function visit() is created where the get() method is used to load the URL of the web application.

The Async function time() is created. In the async function, the path for the web element to be tested on the web application is defined in the async function.

The Async functions before() and quitB() are created where the async function before() starts a browser session while the async function quitB() ends the browser session.

Finally, the Main class is exported to be used in other files.

Step 7: In the germany.js, kenya.js, and australia.js files, add the same code as the us.js file. The only difference is the capabilities variables, as shown below.

Capabilities for germany.js

Then add the BerlinCaps variable to the value of the seleniumDriver variable.

Capabilities for kenya.js

Then add the NairobiCaps variable to the value of the seleniumDriver variable.

Capabilities for australia.js

Then add the SydneyCaps variable to the value of the seleniumDriver variable.

Step 8: In the Geolocation folder, create four files called newyork.spec.js, berlin.spec.js, nairobi.spec.js, and sydney.spec.js, as shown below.

Step 9: In the newyork.spec.js, add the following code.

ach(async () => {
        Time.quitB();
    });

    it("User should be able to see their local time in New York", async function() {
        await Time.visit();

        await Time.time();
    });
});

Code Walkthrough

Variable Time is assigned the value of the Main class imported from the us.js file.

The default timeout interval for tests is set.

The jasmine.DEFAULT_TIMEOUT_INTERVAL = 80 * 1000; sets the default timeout interval to 80,000 milliseconds or 80 seconds. This means that if a test doesn’t complete within 100 seconds, it will be marked as a failure.

The jasmine.getEnv().defaultTimeoutInterval = 80000; changes the default timeout interval to 60,000 milliseconds, or 60 seconds, after the initial default set in the previous line.

A describe block function called Local Time Tests, where all the tests for the web application are written.

Inside the describe block, beforeEach and afterEach functions are created where they call before() and quitB() async functions created in the Main class.

The beforeEach function is called before each test case is run and is used to set up the initial state or environment for the tests. The afterEach function is called after each test case is run, and it is used to clean up or reset the state of the environment after a test case is completed.

A test case is defined.

The it function is used to define a single test case, and it takes two arguments: the first is a string that describes the test case, and the second is a function that contains the test logic.

The visit() async function from the Main class is called on the driver object, which is an instance of the Selenium WebDriver.

The async function where the path for the web element on the web application defined in the Main class is called.

In the berlin.spec.js, nairobi.spec.js, and sydney.spec.js files, add the same code. The difference is the file imported to each file.

File import in berlin.spec.js

const Time = require(‘../pageModel/germany’)

File import in nairobi.spec.js

const Time = require(‘../pageModel/kenya’)

File import in berlin.spec.js

const Time = require(‘../pageModel/australia’)

Run the commands below on the command line.

npx jasmine spec/Geolocation/newyork.spec.js && npx jasmine spec/Geolocation/berlin.spec.js && npx jasmine spec/Geolocation/nairobi.spec.js && npx jasmine spec/Geolocation/sydney.spec.js

Once the commands run, you should see on your command line that the tests have passed successfully.

Visit your LambdaTest Dashboard, and on the right side of the screen, you should be able to see your recent tests, as shown below.

Click on one of the tests, and you will be redirected to the Automation Dashboard, as shown below.

The Automation Dashboard has all the information about the test, including a video and a screenshot showing how the test went. You can also access the report on Analytics Dashboard, which shows all the details and metrics related to your tests.

To see all the details and metrics related to your tests, navigate to the Analytics Dashboard, and you will be prompted to select an analytics template, as shown below.

In this case, you can select the Tests Summary Report template that provides all the summaries of the tests run on the LambdaTest Cloud Selenium Grid. On the right side of your page, you are prompted to create a dashboard where the test analytics will be displayed.

The first thing you need to do is give the dashboard a name. In this case, you can name the dashboard Geolocation Tests, as shown below.

Then filter the web automation reports you want to be displayed on the Geolocation Tests dashboard. In this case, you can filter the reports by builds and then add the builds, as shown below.

Finally, click the Create New Dashboard button at the bottom. You will then be redirected to the tests summary report, as shown below.

This questionnaire intends to provide a list of some of the most frequently asked Jenkins interview questions to assist job seekers in preparing for interviews.

Conclusion

In conclusion, building web applications using a React Virtual DOM can improve web application performance and user experience. By using automation testing frameworks like Jasmine and web automated testing platforms like LambdaTest Cloud Selenium Grid, you can ensure a web application performs as expected when accessed by users.

Frequently Asked Questions (FAQs)

1. What is a virtual DOM in React?

In React, the Virtual DOM (Document Object Model) is a lightweight copy of the actual DOM representation of a web page. It is a concept and technique used by React to optimize the updating process of web interfaces.

When changes occur in a React component, instead of directly manipulating the real DOM, React creates a virtual representation of the DOM and compares it with the previous version. This allows React to efficiently determine the minimal number of changes needed to update the real DOM.

2. What is React DOM vs React Virtual DOM?

React DOM and React virtual DOM are two different concepts in React:

React DOM is the package specifically designed for rendering React components into the real DOM. It provides the necessary methods and APIs to interact with the actual DOM, update it, and handle events. React DOM efficiently updates the real DOM based on changes in the virtual DOM.
The Virtual DOM is a lightweight copy of the actual DOM. It is a concept and technique used by React to optimize the updating process of web interfaces. When changes occur in a React component, instead of directly manipulating the real DOM, React creates a virtual representation of the DOM and performs a diffing algorithm to determine the minimal changes needed to update the Real DOM.

3. Why is React virtual DOM faster?

The React virtual DOM is designed to improve performance in several ways:

Efficient updates
Batched updates
Minimized DOM manipulations
Virtual DOM operations are faster
Efficient reconciliation

Overall, the combination of efficient updates, batched operations, minimized DOM manipulations, faster virtual DOM operations, and optimized reconciliation contribute to the improved performance of React’s virtual DOM approach.

How To Perform Modern Web Testing With TestCafe Using JavaScript And Selenium

Bonnie — Mon, 26 Dec 2022 13:31:05 +0000

Whether it is an application or web app, every software requires testing after development to ensure it does what we expect it to do. Software testing involves using manual or automated tools. Test automation tools are the best to use over manual tools because they increase software testing effectiveness, efficiency, and coverage.

End-to-End testing (or E2E testing) is used to test whether the flow of an application right from start to finish is behaving as expected. End-to-End tests simulate real user scenarios where the automation tool tests how a real user would use the application.

This blog on modern web testing with TestCafe will help you learn how to perform End-to-End automated web tests with JavaScript using TestCafe and cloud Selenium Grid.

Let’s get started!

Start your journey with Selenium JavaScript Testing on LambdaTest’s online cloud.

What is TestCafe?

As per the StackOverflow 2021 Developer Survey, JavaScript completed its ninth year as the most commonly used programming language.

TestCafe is a Node.js End-to-End free and open-source automation framework used to test web applications. TestCafe supports both JavaScript and TypeScript. Hence you can write TestCafe tests in either one of the two. With TestCafe, you needn’t depend upon WebDriver or worry about manual timeouts. Get the most out of cross browser testing with this TestCafe tutorial on performing modern web testing with TestCafe.

What is Selenium?

Selenium is an open-source automation framework extensively used in automated tests for web applications. A new version of Selenium has been launched in the market. The latest version is Selenium 4, an upgrade from Selenium 3. You can learn about the features and improvements in Selenium 4 by going through this Selenium 4 tutorial.

The most notable improvement in Selenium 4 is the World Wide Web Consortium(W3C) compliance with WebDriver APIs. This means that Selenium 4 offers more stable cross-browser tests, as no additional encoding-decoding of the API requests is necessary.

TestCafe Trends on GitHub

TestCafe is a prevalent test automation framework; the data obtained from the official TestCafe GitHub repository says it all:

Stars: 93K
Contributors: 107
Forks: 650
Releases: 338
Used by 10K users

At the time of writing this blog, TestCafe had 254,003 weekly downloads on NPM.

Advantages of TestCafe Automation

Now that I have covered the fundamentals of TestCafe, let’s look at some of the significant advantages of TestCafe. JavaScript supports several other web automation frameworks like WebDriverIO, Mocha, Jasmine, Protractor, etc. The critical question is, what is the core speciality of TestCafe?

Here are some of the major benefits of the TestCafe automation framework:

TestCafe is easy to set up because it does not require the installation of third-party plugins, web drivers, or additional libraries to run tests.
TestCafe supports all major browsers, such as
Google Chrome
IE 11
Microsoft Edge
Mozilla
Safari
Chrome mobile
Safari mobile
TestCafe is open source and free to use because it is licensed by MIT.

Check this out: How To Debug Websites Using Developer Tools for safari

Liked this video? Follow the LambdaTest YouTube Channel for more such videos around Selenium testing, CI/CD, Cypress UI testing, and more,

Getting Started With TestCafe Automation

In this section of this article on modern web testing with TestCafe, you will learn how to install TestCafe and run your first test in TestCafe. To install and use TestCafe in your system, you need a Text Editor, NodeJS, and Node Package Manager (NPM) installed.

For demonstration, I will be using Visual Studio Code as the Text Editor. However, you can use the IDE of your choice.

Here is the list of VS Code extensions necessary for performing modern web testing with TestCafe.

TestCafe Snippets: Provides code snippets for TestCafe
TestCafe Test Runner: Allows you to run tests directly from VS Code
TestLatte: Lets you debug or run your TestCafe tests on VS Code

Want to make your life of testing easy and fuss-free while debugging? Try LT Debug Chrome extension!

How to install TestCafe Extensions

To install TestCafe Extensions, please follow the below mentioned steps:

On your computer, create a folder called “TestCafeDemo”.
Right-click on the folder and open it using VS Code.
Once VS Code has launched, navigate to extensions by clicking the extensions button on the left side of your screen.

4- On the extension’s search bar, type “testcafe” and all three extensions will appear. Click on each extension and install it.

Installing TestCafe in VS Code

To install TestCafe in VS Code, please follow the below mentioned steps:

Open the terminal on VS Code by clicking the Terminal option at the top of your VS Code Window and then select New Terminal as shown below:

2- Run the command below on your terminal to install TestCafe.

   npm install testcafe.

3- Once the installation is done, run the command below to see the version of TestCafe installed.

   testcafe -v

4- Run the command below to create a Package.json file.

    npm init

5- Run the command below to add TestCafe as a dependency for our project.

    npm install testcafe

Now, if you navigate to the package.json file, you will find that TestCafe has been added as one of the dependencies.

Run TestCafe Tests on the cloud! Try LambdaTest Now!

Check this out: Playwright automation Tutorial- Getting Started With Playwright Framework

How to run Selenium Tests using TestCafe?

To demonstrate how to perform TestCafe testing using Selenium, I will be using a dummy e-commerce playground from LambdaTest for automating test scenarios. Here, the customers need to create an account to be able to buy something from the website.

To make sure that the registration form works as expected, you can use TestCafe to run an automated test where TestCafe simulates the end-user interaction with the elements in the DOM. The automation will be performed on the Chrome, Firefox, and Safari browsers.

To run the test, we will create a folder called “TestCafeTests”. Inside the folder, we will create two folders called “PageModel” and “Tests”. We will create two folders inside the “TestCafeTests” folder because we will be using Page Object Model in Selenium.

Page Object Model, also known as POM, is a design pattern where an object repository is created for storing the WebElements. POM helps us reduce code duplication and minimizing efforts involved in test case maintenance.

Before running the test, let us see how the test case will run a test on the e-commerce registration page.

Test Scenario (Chrome Browser)

Navigate to the e-commerce playground.
Add “John” to the First Name input field.
Add “Doe” to the Last Name input field.
Add “johndoe@example.com” to the email input field.
Add “0712345678” to the telephone input field.
Add “Qwerty123!” to the password input field.
Add “Qwerty123!” to the password confirm input field.
Select the “agree to privacy policy” checkbox.
Click the “Continue” submit button.

To run TestCafe tests, follow the below mentioned steps:

Create a new folder in your project and call “TestCafeTests” in this path “TestCafeDemo/TestCafeTests”.

2- In the “TestCafeTests” folder, create two other folders called “PageModel” and “Tests”.

3- In the “PageModel” folder, let us create a file called “SignUp.js” as shown below.

Setting up POM

You can follow the below mentioned steps to set up POM:

In this step, we will declare the “SignupPage” class in the “SignupPage.js” file and export its instance as shown below.

   class SignupPage {

       constructor(){
       }
    }

    export default new SignupPage();

2- We will need to add WebElements to the “SignupPage” class. These WebElements will be input fields and buttons on the e-commerce website registration page that I mentioned earlier.

3- Navigate to the registration page, inspect the web page and get the ID locator of the input fields together with buttons that a user is expected to fill and click when creating an account as shown below.

4- Then add “firstname, last name, email, telephone, password, confirm password, Click on agree and continue” ID and Class locators to the model. To do this, we will introduce “firstnameInput, lastnameInput, emailInput, telephoneInput, passwordInput, confirmInput, agreeBtn, and continueBtn ” properties and assign a selector to them. If you wish to learn more about Selenium locators, go through this article on Locators in Selenium WebDriver.

5- When inspecting the web page to get the ID locators, you will find out that the “Continue” submit button has no ID assigned to it. For TestCafe to be able to locate it, we will get the submit button class name and add “input.” before the class instead of “#” which represents ID locators.

6- To assign a selector to them, we will have to import it at the top of the “SignupPage.js” file from TestCafe. The “SignupPage.js” file should now look as shown below:

FileName — SignupPage.js

  import {Selector, t} from 'testcafe';

    class SignupPage {

       constructor(){
           this.firstnameInput = Selector('#input-firstname');
           this.lastnameInput = Selector('#input-lastname');
           this.emailInput = Selector('#input-email');
           this.telephoneInput = Selector('#input-telephone');
           this.passwordInput = Selector('#input-password');
           this.confirmInput = Selector('#input-confirm');
           this.agreeBtn = Selector('#input-agree');
           this.continueBtn = Selector('input.btn-primary');
       }
    }

    export default new SignupPage();

7- Let us now create a test that uses the POM design pattern Page that we created earlier. In the “Tests” folder, create a file called “SignupTest.js” as shown below.

8- In the “SignupTets.js” file, we will import the page model instance from the “SignupPage.js” file as shown below.

   import SignupPage from "../PageModel/SignupPage";

9- Let us now create a variable called “url” that will hold the test URL against which the automation tests are run.

   import SignupPage from "../PageModel/SignupPage";

    const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

10- Next we will declare a fixture. Fixtures are used to divide the list of test cases into categories. Fixtures in Selenium represent a group of tests that are targeted on one URL. Fixtures help to manage test cases with different test pages. Each fixture can represent tests on the Login Page, Registration Page, or Home Page

  import SignupPage from "../PageModel/SignupPage";

    const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('SignUp Page')
       .page(url)

11- Now declare a test case named “Registration”, which is an asynchronous function that contains test code with a test controller object (t). All test actions are implemented as an async function of the test controller object t. This object is used to access the test run API.

    import SignupPage from "../PageModel/SignupPage";

    const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('SignUp Page')
       .page(url)

    test("Registration", async t => {

    });

12- Next we will use the “t.wait” function to wait for the actions to complete. When TestCafe executes a Selector query, it waits for the target element to appear in the DOM.

    import SignupPage from "../PageModel/SignupPage";

    const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('SignUp Page')
       .page(url)

    test("Registration", async t => {
       await t

    });

13- After that, we will use a method TestCotroller called “.typeText” which takes two parameters. The first parameter is a selector that identifies the WebElement in the DOM to receive input focus. The second parameter is the text that we intend to enter in the recently located WebElement.

14- To test the radio button and submit button, we will use a method TestController called “.click”. The “.click” TestController method performs a click on the WebElement, and it takes one parameter — Selector used to identify the WebElement on the page.

15- Since we already declared the selectors in the page model and imported the page model to our test file, we can just add the names we gave the selectors as our first parameter in the “.typeText” and “.click” TestController methods as shown below.

   import SignupPage from "../PageModel/SignupPage";

    const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('SignUp Page')
       .page(url)

    test("Registration", async t => {
       await t
           .typeText(SignupPage.firstnameInput, 'John')
           .typeText(SignupPage.lastnameInput, 'Doe')
           .typeText(SignupPage.emailInput, 'johndoe@example.com')
           .typeText(SignupPage.telephoneInput, '0712345678')
           .typeText(SignupPage.passwordInput, 'Qwerty123!')
           .typeText(SignupPage.confirmInput, 'Qwerty123!')
           .click(SignupPage.agreeBtn)
           .click(SignupPage.continueBtn);
    });

16- To run the test, run the command below on your command line. The command specifies the browser to use and the file that has the tests we want to be performed on the Test Page.

   testcafe chrome TestCafeTests/Tests/SignupTest.js

17- TestCafe will launch the Chrome browser, navigate to the URL we specified in the fixture, and run all the tests that are a part of the test function. If everything looks good, you should be notified on the terminal that the test ran successfully.

How to run Parallel Tests in TestCafe?

The primary purpose of parallel testing in Selenium is to expedite the test execution time. The main benefits of parallel testing are:

Accelerated test execution
Increased test and browser coverage

We can execute tests in parallel using TestCafe by enabling concurrent mode, which runs multiple browser instances simultaneously.

To enable concurrency while performing modern web testing with TestCafe, use the -c command-line option when running a test. To discover other TestCafe command-line options, you can run the following command in the terminal.

  testcafe — help

The following command invokes two Chrome instances and runs tests in parallel.

  testcafe -c 2 chrome tests/firstTest.js

You can also use concurrency when testing against multiple browsers. When setting the number of browser instances, make sure they are not more than the tests that you are running. The extra browsers will open but end up with an empty page because there are no tests left for those browsers. Extra browsers with empty pages will only lead to the consumption of system resources.

   testcafe -c 2 chrome, safari, firefox tests/firstTest.js

As mentioned earlier, the primary benefit of parallel testing is to reduce testing time; if a large number of test scenarios have to be executed on the cloud Selenium Grid. To prove if this is true, we will create another test that checks if customers are able to log in to their accounts. Then we will run a normal test followed by a parallel test to compare.

Create a new file called “LoginPage.js” in the PageModel folder and a file called “LoginTest.js” in the Tests folder as shown below:

2- Set up the Page Object Model in the “LoginPage.js” file as shown below.

   import { Selector, t } from 'testcafe';

    class LoginPage {

       constructor() {
           this.emailInput = Selector('#input-email');
           this.passwordInput = Selector('#input-password');
           this.loginBtn = Selector('input.btn-primary');
       }
    }

    export default new LoginPage();

3- Create a login test in the “LoginTest.js” file as shown below.

   import LoginPage from "../PageModel/LoginPage";

    const url = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/login'

    fixture('Login Page')
       .page(url)

    test("Login", async t => {
       await t
           .typeText(LoginPage.emailInput, 'johndoe@example.com')
           .typeText(LoginPage.passwordInput, 'Qwerty123!')
           .click(LoginPage.loginBtn);
    });

4- Let us now run a test using the command below and see how long the tests take to run.

   testcafe chrome TestCafeTests/Tests

As you can see from the screenshot, it took 50 seconds to execute the two tests.

5- Let us now see if a parallel test will take less than 50 seconds by using the command below.

   testcafe -c 2 chrome TestCafeTests/Tests

As you can see from the screenshot below, the parallel test took 37 seconds to execute the test. That means the parallel test has saved us 13 seconds. It might not be a lot but imagine how much time it would save you if you were running 100 tests or more.

Test automation is highly beneficial, but sometimes it can be quite expensive, especially when testing at a large scale. To determine if test automation is worth the cost, you will need to calculate the Return On Investment (ROI). One of the metrics for evaluating the ROI of test automation is figuring out how much time you would save running the automatic tests.

Execute TestCafe Script in Parallel Testing on the Cloud! Try LambdaTest Now!

How to run Tests in Headless Mode in TestCafe?

In simple terms, headless mode is running a test on a browser without the browser UI starting up or showing, meaning that the test runs in the background. Headless mode testing improves the speed and performance of your tests because the system saves the processing power that would otherwise be used in running the browser instance.

TestCafe allows you to run tests in Google Chrome and Mozilla Firefox. To perform modern web testing with TestCafe in headless mode using Chrome, you can use the following command:

   testcafe chrome:headless tests/firstTest.js

To run a test in headless mode using Firefox, you can use the following command:

   testcafe firefox:headless tests/firstTest.js

Check list of all Selenium browsers on LambdaTest.

This Selenium 4 complete tutorial covers everything you need to know about Selenium 4.

Check this out: How To Debug Websites Using dev tools in Safari

How to run Tests using TestCafe and Cloud Selenium Grid?

In this article on modern web testing with TestCafe, you might have realized that running tests on different browsers and platform versions can be a huge hassle with the local Selenium Grid.

Let’s consider a hypothetical scenario where you have a Windows machine, and you want to run cross-browser tests on (Safari + macOS) or (Firefox + Linux) combination. This is where cloud Selenium testing can be hugely beneficial since it eliminates the need to invest in the maintenance of the in-house test infrastructure continually.

Cloud Selenium Grid provides us with an option to run tests on a range of virtual browsers, browser versions, and operating systems securely over the cloud. LambdaTest is one such platform that provides a secure, scalable, and super reliable cloud-based Selenium Grid infrastructure that lets you run tests at scale.

LambdaTest is a cloud-based cross browser testing platform that allows you to run tests on an online browser farm of 3000+ real browsers and operating systems for mobile, desktop, and tablets. LambdaTest Selenium Grid also allows you to perform parallel testing.

To use LambdaTest Selenium Grid together with TestCafe to run your tests, you will need a LambdaTest account.

Navigate to the LambdaTest website and log in if you already have an account, or create one if you don’t have an account yet.

2- Once you are logged in, navigate to the automation page by clicking automation on the left sidebar of your screen.

3- To use TestCafe with LambdaTest Grid, you need LambdaTest credentials (i.e. username and access key). To get the credentials, click the “Access Key” button on the right side of your screen.

4- Let us now save the credentials (username and access key) to environment variables LT_USERNAME and LT_ACCESS_KEY in our project.

5- To save username to environment variable LT_USERNAME and access key to LT_ACCESS_KEY on Linux/Mac, run the following commands.

    $ export LT_USERNAME= insert your username
    $ export LT_ACCESS_KEY= insert your access_key

6- For Windows, run the following commands

    $ set LT_USERNAME= insert your username
    $ set LT_ACCESS_KEY= insert your access_key

7- To add these credentials to an environment variable in your project, run the following command on the Visual Studio command line.

  nano .bashrc

8- Then add your credentials as shown below.

  $ export LT_USERNAME= insert your username
    $ export LT_ACCESS_KEY= insert your access_key

9- Make sure you save the file by pressing CTRL + X and then press enter.

10- LambdaTest has an npm plugin that allows you to integrate TestCafe with LambdaTest for seamless cross browser compatibility and true test coverage. You can install the plugin by running the following command:

   npm install testcafe-browser-provider-lambdatest

11- Run the below-mentioned command to have a look at the browsers supported by the LambdaTest Selenium Grid:

  testcafe -b lambdatest

12- Let us save our TestCafe credentials in our project so that our authentication on LambdaTest Selenium Grid goes through. You can save the credentials by running the commands below.

   $ set LT_USERNAME=*insert your username*
    $ set LT_ACCESS_KEY=*insert your accesskey*

We are now ready to run our test using TestCafe and LambdaTest Selenium Grid.

Check this out: Playwright automated testing Tutorial- Getting Started With Playwright Framework

Test Case Scenarios

As mentioned earlier, the advantage of using Cloud Selenium Grid is to have an option of testing on multiple browser versions and operating systems. In our case, we will use three test combinations to test whether our e-commerce website registration and login form work as expected. These combinations are:

Chrome 85.0 + macOS Catalina
Firefox 78.0 + Windows 10
Chrome 86.0 + Windows 11

Implementation

To define your desired set of browser and operating system combinations, you can use LambdaTest Capabilities Generator as shown below:

2- After setting your desired combinations, create a file called config.json and add your combinations as shown below without changing the code.

FileName — config.json

   {
       "Chrome@85.0:MacOS Catalina": {
           "build": "TestCafe Demo",
           "network": true,
           "visual": true,
           "resolution": "1024x768"
       },


       "Firefox@78.0:Windows 10": {
           "build": "TestCafe Demo",
           "network": true,
           "visual": true,
           "resolution": "1024x768"
       },


       "Chrome@86.0:Windows 11": {
           "build": "TestCafe Demo",
           "network": true,
           "visual": true,
           "resolution": "1024x768"
       }
    }

3- To run a test on (Chrome 85.0 + MacOS Catalina) combination, run the command below.

    testcafe "lambdatest:Chrome@85.0:MacOS Catalina" TestCafeTests/Tests

4- To run a test on (Firefox 78.0 + Windows 10) Combination, run the command below.

    testcafe "lambdatest:Firefox@78.0:Windows 10" TestCafeTests/Tests

5- To run a test on (Chrome 85.0 + Windows 11) Combination, run the command below.


    testcafe "lambdatest:Chrome@85.0:Windows 11" TestCafeTests/Tests

6- In case there are no issues with the test code, you should have the message on your Visual Studio Code Terminal that the test was successful for each combination.

7- If you visit your LambdaTest Dashboard on the right side of your screen, you should be able to see your recent tests, as shown below.

8- If you click on one of the tests, you will be redirected to the Automation Dashboard, where all the information about the test is available. This information includes a video and a screenshot that shows you how the test went.

This certification will acknowledge your expertise in the use of JavaScript to create automated browser tests. Here’s a short glimpse of the Selenium JavaScript 101 certification from LambdaTest:

Check this out: Emulator vs Simulator vs Real Device Testing- Key Differences

How to run a Parallel Test on TestCafe and Cloud Selenium Grid?

In Selenium, parallel testing can be described as a method of testing that you can use to run tests simultaneously in different environments such as browser versions and operating systems.

One of the main benefits of parallel testing on TestCafe and Cloud Selenium Grid is that it accelerates test execution while saving time, especially when testing at a larger scale. Also, parallel testing in Selenium is cost-effective and has a higher Return On Investment (ROI) compared to sequential testing.

Sequential testing is a tedious process requiring development, maintenance, and keeping the test environment updated all the time. Managing all these factors can be costly compared to parallel testing in Selenium, which is automated and cloud-based.

To run a parallel test on LambdaTest Cloud Selenium Grid on browser and operating system combinations that we used earlier, you can run the command below on your Visual Studio Code editor terminal.


    testcafe "lambdatest:Chrome@85.0:MacOS Catalina","lambdatest:Firefox@78.0:Windows 10","lambdatest:Chrome@85.0:Windows 11" TestCafeTests/Tests

As you can see from the screenshot below, the tests ran successfully on all combinations.

Once the tests have run successfully, log in to LambdaTest Automation Dashboard to check the status of the test execution. You can also access the report on Analytics Dashboard, which shows all the details and metrics related to your tests.

Test Summary gives you a high-level overview of your test performance by showing you how many tests passed and failed. Below is a screenshot with all details and metrics related to tests that I run on Cloud Selenium Grid and TestCafe JavaScript end-to-end web testing.

Check this out: Cross Browser Testing Cloud- Browser test & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems.

Conclusion

The idea behind TestCafe is to solve common challenges developers and testers face with testing tools like Selenium. However, the integration of Cloud Selenium Grid and TestCafe JavaScript helps you to scale up your testing environment without spending a lot of money to set up an in-house grid infrastructure. I hope you enjoyed this article on performing modern web testing with TestCafe! 🙂

TestCafe Tutorial: How To Select Page Elements Using TestCafe Selectors

Bonnie — Fri, 23 Dec 2022 13:05:48 +0000

Let’s assume you want to build or create a web page as a web developer. First, you will create an HTML file that comprises semantic and non-semantic elements (e.g. < header >, < section >, and < footer > are examples of semantic elements). < div >, < span >, < h1 >, and < p > are examples of non-semantic elements.

You must style the HTML elements using CSS to ensure the web page is super-responsive on different viewport sizes. The best way to style an HTML element is by targeting it using CSS Selectors.

For instance, you could provide a unique id or class for styling the < header > element. The id and class attributes make it easier to target the < header > element and add styling to it on a CSS file. Therefore, there is a provision to add the id and class attributes by writing HTML code that looks like < header id=”header” > and < header class=”header” >.

What do CSS Selectors have in common with TestCafe Selectors? Before answering that question, let us first understand what is TestCafe and what are TestCafe Selectors in this TestCafe tutorial.

By the end of this TestCafe tutorial on TestCafe Selectors, you will have learned how to use TestCafe Selectors for selecting elements on the web page.

What is TestCafe?

TestCafe is a Node.js-based open-source automation testing framework that can be majorly used for End to End (E2E) testing of web applications. TestCafe supports both JavaScript and TypeScript.

As a web developer and technical writer, I have been working on a portfolio website that helps me showcase my expertise. However, how can I ensure that the website does what I expect it to do when viewed on different browsers and operating systems? This is where I leverage the benefits of end-to-end (E2E) testing.

I can run End to End tests using TestCafe because it does not require any external dependencies like WebDriver (in the case of Selenium). Also, TestCafe uses the browsers I already have on my machine.

At the time of writing this TestCafe tutorial, TestCafe had 9.4K stars and 659 forks, and the latest version was 1.20.1.

What are TestCafe Selectors?

TestCafe Selectors are selectors that filter a web page and return page elements that match specified user-defined criteria. In simple terms, TestCafe Selectors target page elements you want to test, akin to how CSS Selectors target the HTML elements you want to style.

For example, let’s consider a form on a web page with two inputs and a submit button. If you wanted to style the input elements and the button, you would have to target them using CSS Selectors, as you mentioned earlier.

What if you wanted to test whether a user can fill in the form and submit the input data using Testcafe?

TestCafe can identify the form inputs and buttons using TestCafe Selectors (like CSS selectors), as they both take advantage of unique ids or class attributes to locate the elements.

In this TestCafe tutorial on TestCafe Selectors, we will go through different types of TestCafe Selectors and learn how to use them to find page elements that you want to test.

Run TestCafe Tests on the cloud! Try LambdaTest Now!

How to install TestCafe?

In this section of this TestCafe tutorial on how to use TestCafe Selectors to select page elements, you will learn how to install TestCafe and use TestCafe Selectors. To install and use TestCafe in your system, you need an IDE, Node.js, and Node Package Manager (NPM) installed.

I will use Visual Studio Code as the IDE for the demonstration. However, you can use the IDE of your choice.

To install TestCafe on your machine, please follow the steps:

Step 1: Create a folder called “TestCafeSelectors,” then right-click on the folder and open it using Visual Studio Code.

Once the “TestCafeSelectors” folder has opened on VS Code, open the terminal on VS Code by clicking the “Terminal” option on the top of your VS Code window, and then select “New Terminal,” as shown below.

Step 2: Run the command below on your terminal to install TestCafe.

 npm install testcafe

Step 3: Once the installation is done, run the command below to see the version of TestCafe installed.

    testcafe -v

Step 4: Run the command below to create a package.json file.

  npm init

The package.json file represents various metadata relevant to your project. The package.json file also helps NPM identify the project’s information and dependencies.

If you open the package.json file, it should look as shown above. The only thing we now need is to add TestCafe as a dependency for our project.

Step 5: Run the command below to add TestCafe as a dependency to the project.

 npm install testcafe

Now, you find that TestCafe has been added as one of the dependencies.

Before we go through different types of TestCafe Selectors and learn how to use them to target page elements that you want to test, let me talk about the Page Object Model.

Check this out: XCUITest: A Detailed Guide To XCUITest Framework

Understanding Page Object Model

Page Object Model, also known as POM, is a design pattern commonly used by testers when performing automation testing. The primary aim of the Page Object Model is to avoid code duplication and enhance code reusability. The POM design pattern is more programmer-friendly, making it easier to maintain and enhance test code.

As mentioned earlier in this TesCafe tutorial on TestCafe Selectors, test automation frameworks like TestCafe help navigate a web page and perform relevant actions with the WebElements that are targeted using the appropriate TestCafe Selectors.

The Page Object Model houses all the WebElements, actions, and validations happening on a page in one single Page Object. The POM directs us to create an object representing the UI of the page we want to test.

The benefits of using the Page Object Model are more prevalent when testing complex and large-scale applications. Adopting the POM design pattern can be a huge time and cost saver on large-scale applications. The reason is that these applications are only expected to grow larger and more complex with every software release.

Improved maintenance reduces the overhead costs involved in enhancing the test code.

Implementing Page Object Model

As a developer, tester, or SQE, you should habitually implement the Page Object Model in your project.

Let’s look at how the Page Object Model can be implemented in a test case that demonstrates how to choose page elements using TestCafe Selectors.

Step 1: Create a new folder in your project and name it “TestCase” in the path “TestCafeSelectors/TestCase”.

Step 2: In the “TestCafe” folder, create two other folders called “PageModel” and “Tests”.

Step 3: In the “PageModel” folder, create a file called “selectors.js” in the path “TestCafeSelectors/TestCase/PageModel/selectors.js” as shown below.

The next step is to set up the Page Object Model to demonstrate how to use TestCafe Selectors to locate page elements. However, before I show you how to do that, let us assume you have an e-commerce website.

On this e-commerce website, customers have to register or create an account for them to be able to check out items they have added to the cart. Now, how can you ensure that customers can register successfully without any issues?

To ensure that the registration form works as expected, you can use TestCafe to run an automated test where TestCafe simulates the customer interaction with the inputs and buttons on the registration page.

To demonstrate how to use TestCafe Selectors to select page elements, I will be using the LambdaTest e-commerce playground. To set up the Page Object Model for this project, declare the “TestCafeSelectors” class in the “selectors.js” file and export its instance as shown below.

  class TestCafeSelectors {

       constructor() {
       }
    }

    export default new TestCafeSelectors();

The next step is to import the Selector function on top of the “selectors.js” file. After that, let us add properties and assign a selector to them inside the constructor.

Check this out: Test On iPhone tester Simulator On Cloud

How to use TestCafe Selectors to select page elements?

Before performing any selector operation, you must find an XPath path to interact with the element. Some ways to get the element path are by ID, className, a unique attribute such as p, div, h1, or creating a custom XPath where you create relations between elements like child, parent, or sibling.

You can now see how TestCafe Selectors are closely related to CSS selectors. Let us now see some TestCafe element selector examples.

Selecting page elements by ID

To learn how to select a page element by ID, navigate to the e-commerce website registration page I mentioned earlier. Inspect the web page and get the ID locator of “First Name” input which the user is expected to fill when registering for an account, as shown below.

The next step is to add the “First Name” ID locator to the Page Object Model. To do this, let us introduce the “firstnameInput” property and assign a selector to it.

To assign a selector to the “firstnameInput,” we must import it at the top of the “selectors.js” file from TestCafe. The “selectors.js” file should now look as shown below.

  import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.firstnameInput = Selector('#input-firstname');
       }
    }

    export default new TestCafeSelectors();

Let’s now create a test case that opens the browser, navigates to the e-commerce website registration page URL, and enters “John” into the “First Name” input field. Note that the test will use the existing directory structure we discussed earlier.

In our project’s “Tests” folder, create a file called “SelectorsTest.js,” as shown below.

In the “SelectorsTest.js” file, at the top, import the page model instance named “TestCafeSelectors” from the “Selectors.js” file in the PageModel folder, as shown below.

    import TestCafeSelectors from “../PageModel/Selectors”;

After adding the page model module, let us create a variable called “pageURL” that will hold the e-commerce website URL, as shown below.

   import TestCafeSelectors from "../PageModel/Selectors";

    const pageURL =   'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

Next, let us declare a fixture named “Registration Page” as shown below.

    import TestCafeSelectors from "../PageModel/Selectors";

    const pageURL = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('Registration Page')
       .page(pageURL)

Note that fixtures are used to divide the list of test cases into categories. They help to manage test cases with different test pages. For example, each fixture can represent tests on the Product Page, Check Out Page, or Home Page.

Let us now create a test named “FirstName,” as shown below.

    import TestCafeSelectors from "../PageModel/Selectors";

    const pageURL = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('Registration Page')
       .page(pageURL)

    test("FirstName", async t => {

    });

The test case we declared above is an asynchronous function that contains test code with a test controller object(t). Note that all test actions are implemented as an async function of the test controller t, which is used to access the test run API.

When TestCafe executes a Selector query, it waits for the target element to appear in the DOM. To learn more about it, you can go through this blog on handling waits in Selenium.

To enable TestCafe to wait for the target element to load, let us add the “t.wait” function into our “FirstName” test as shown below:

   import TestCafeSelectors from "../PageModel/Selectors";

    const pageURL = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('Registration Page')
       .page(pageURL)

    test("FirstName", async t => {
       await t

    });

Understanding t.wait Function In TestCafe

Wait commands are important for test automation frameworks such as TestCafe and Selenium. Including wait commands in your test code helps the testing framework to wait for a web page to load or an element to appear on the web page. If wait commands are not used, Element Not Found Exceptions might occur.

TestCafe has six types of wait commands or mechanisms. These commands or mechanisms are:

Wait Method.
Wait Mechanism for Actions.
Wait Mechanism for Selectors.
Wait Mechanism for Assertions.
Wait Mechanism for XHR and Fetch Requests.
Wait Mechanism for Redirect.

The t.wait Function is part of the second wait mechanism, which automatically waits for the element to become visible before an action is executed. Note that an element must be interactable before an operation can be performed on it.

TestCafe actions can interact with elements if they satisfy the following conditions:

An element is within the < body > element of a page window or an < iframe > window.
An element is visible.
An element is not overlapped.

TestCafe automatically waits for the target element to become visible when running a test. It tries to evaluate the specified selector multiple times within the timeout. If the element does not appear, the test will fail.

With the “t.wait” function in place, let us now use a method TestController called “typeText.” The TestController takes two parameters; where the first parameter is a selector that identifies the page element in the DOM to receive input focus.

The second parameter is the text we intend to enter in the selected page element, which in our case is “John.” The .typeText syntax looks as shown below.

t.typeText(selector, text)

Since we already declared the Selector in the page model and imported it to our test file, let us add “firstnameInput’, which is the name we gave the selector, as our first parameter in the “.typeText” TestController as shown below in the final code.

    import TestCafeSelectors from "../PageModel/Selectors";

    const pageURL = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('Registration Page')
       .page(pageURL)

    test("FirstName", async t => {
       await t
           .typeText(TestCafeSelectors.firstnameInput, 'John')
    });

To make sure that TestCafe is able to select the “First Name” input element and type the name “John,” run the command below on your command line.

    testcafe chrome TestCase/Tests/SelectorsTest.js

Note that the command specifies the browser to use and the file that has the test we want to be performed on the Test Web Page.

TestCafe will launch the Chrome browser, navigate the e-commerce website registration page URL and enter the name “John” into the “First Name” input field.

If there are no errors, you should be notified on the terminal that the test ran successfully, as shown below.

Check this out: Test On Android Emulator Online. Test your web and mobile apps on Android Emulators online.

Selecting page elements by Class Name

In this section of this TestCafe tutorial, we will learn to select page elements by Class Name locator. Let us consider a page on which you want to interact with an element with no ID. What can be done in such cases? The first thing you need to do is to check whether the page element has a class name.

For example, when you inspect the e-commerce website registration page to get ID locators, you will find that the “Continue” submit button has no ID. To enable TestCafe to locate the button, you need to get the submit button class name, then add “input.” before the class instead of “#,” which represents ID locators.

In the test case project, the first step is to add the “Continue” submit button class name locator to the Page Object Model.

To do that, let us introduce the “continueBtn” property and assign a selector to it, as shown below on the “selectors.js” file.

  import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.continueBtn = Selector('input.btn-primary');
       }
    }

    export default new TestCafeSelectors();

To test the submit button, let us use a method TestController called “.click,” which performs a click on the page element. The TestController takes one parameter, which is used to identify the page element. To learn more about it, you can refer to this blog on the Selenium click method button.

Once you have imported the page model to your test file, the “SelectorsTest.js” file should now look as shown below in the snippet:

    import TestCafeSelectors from "../PageModel/Selectors";

    const pageURL = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('Registration Page')
       .page(pageURL)

    test("SubmitButton", async t => {
       await t
           .click(TestCafeSelectors.continueBtn)
    });

Run the command below, and TestCafe can select the submit button as it was able to select the “First Name” input when locating an element using ID.

    testcafe chrome TestCase/Tests/SelectorsTest.js

Check this out: Exploratory Testing Tutorial: A Comprehensive Guide With Examples and Best Practices

Selecting page elements by Attribute

When selecting a page element by attribute, you use a Selector.withAttribute method, which finds elements with the specified attribute or attribute value. The syntax of the method looks as shown below.

   Selector().withAttribute(attrName [, attrValue]);

Attribute name (attrName) is case-sensitive together with attribute value (attrValue), but attribute value is optional.

Understanding Attribute Name and Attribute Value

Attributes are used to give more meaning to HTML tags, where they define additional characteristics or properties of the page element. Attributes are always specified in the start or opening tag, where they usually consist of attribute name and value pairs such as name=”value.” Note that attribute values should always be enclosed in quotation marks.

In the example below, “for” inside the < label > tag is an attribute name, while “input-firstname” is the attribute value.

<label for=”input-firstname”> </label>

Let us assume that you want to test the “First Name” input element on the e-commerce website page I mentioned earlier, but it has no ID or Class Name locators.

What you can do is check whether the input has any attributes. In this case, the “First Name” input tag has attribute name “name” and attribute value “firstname,” as shown below.

To see if TestCafe can locate the “First Name” input element by attribute, the page model code in the “Selectors.js” file should look as shown below.

    import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.firstnameInput = Selector('input').withAttribute("name", "firstname");
       }
    }

    export default new TestCafeSelectors();

Import the Page Object Model to the “SelectorsTest.js” file and the code should look as shown below.

  import TestCafeSelectors from "../PageModel/Selectors";

    const pageURL = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('Registration Page')
       .page(pageURL)

    test("FirstName", async t => {
       await t
           .typeText(TestCafeSelectors.firstnameInput, 'John')
    });

Run the command below and see if the test runs successfully.

testcafe chrome TestCase/Tests/SelectorsTest.js

After hitting the enter button to run the command on the command line, you will run into the error below.

The issue is that TestCafe waits for the browser to be ready but times out before the browser is ready. The solution is to increase the value of the “browserInitTimeout” option, which will give enough wait time until the browser is ready.

To give TestCafe more wait time, add “.wait(5000)” to your code in the “SelectorsTest.js” file, as shown below.

   import TestCafeSelectors from "../PageModel/Selectors";

    const pageURL = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('Registration Page')
       .page(pageURL)

    test("FirstName", async t => {
       await t
           .typeText(TestCafeSelectors.firstnameInput, 'John')
           .wait(5000)
    });

Run the test command and you should be notified on the terminal that the test ran successfully as shown below.

Selecting page elements by custom XPath

XPath is a technique used to navigate through the HTML structure of a page. It can be used to navigate both HTML and XML documents. XPath provides an option to search for an element within a web page dynamically. You can refer to this XPath cheat sheet to learn more about XPath locators.

To use Custom XPath in TestCafe to select a page element, you must create a custom function and import it into your test file. Let us implement Custom XPath in our project by creating a file named “XPathSelector.js” in the PageModel folder, as shown below.

In the “XPathSelector.js” file, import Selector from TestCafe at the top and create a custom function named “getElementsByXPath.” Then export the function at the bottom. Your code in the “XPathSelector.js” should look as shown below.

  import { Selector } from 'testcafe';

    const getElementsByXPath = Selector(xpath => {
       const iterator = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null);
       const items = [];

       let item = iterator.iterateNext();

       while (item) {
           items.push(item);
           item = iterator.iterateNext();
       }

       return items;
    });

    export default function (xpath) {
       return Selector(getElementsByXPath(xpath));
    }

The next step is to import XPathSelector from “XPathSelector.js” at the top of the “Selectors.js” file in the PageModel folder to use the “getElementsByXPath” function.

Let us now use the XPathSelector in the Page Object Model, which targets elements with the custom path “//*[@id=’input-firstname]” as shown below.

Your code in the “Selectors.js” file should look as shown below.

    import { Selector, t } from 'testcafe';
    import XPathSelector from './XPathSelector';

    class TestCafeSelectors {

       constructor() {
           this.firstnameInput = XPathSelector("//*[@id='input-firstname']");
       }
    }

    export default new TestCafeSelectors();

Let us now create a test case that uses the Page Object Model in “SelectorsTest.js” file in the Tests folder. In the test, TestCafe opens a browser instance, navigates to the e-commerce website registration page URL, and enters “John” into the “First Name” input selected by custom XPath “//*[@id=’input-firstname]”.

Your code in the “SelectorsTest.js” file should now look as shown below.

    import TestCafeSelectors from "../PageModel/Selectors";

    const pageURL = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('Registration Page')
       .page(pageURL)

    test("FirstName", async t => {
       await t
           .typeText(TestCafeSelectors.firstnameInput, 'John')
           .wait(5000)
    });

Run the command below to see if TestCafe is able to locate the “First Name” input element and enter “John”.

    testcafe chrome TestCase/Tests/SelectorsTest.js

If there are no errors, you should be notified on the terminal that the test ran successfully, as shown below.

Check this out: Ad Hoc Testing: A Comprehensive Guide With Examples and Best Practices)

Selecting page elements by relations

Apart from selecting a page element using TestCafe with the methods mentioned above, TestCafe provides other methods to select a page element by relations between elements. Relations between elements include:

Parent
Child
Sibling

Every web page comprises an HTML document referred to as a document tree. Elements in the document tree can be described as a family tree where there are parents, children, and siblings.

A parent is an element directly above and connected to an element in the document tree. A child is directly below and connected to an element in the document tree. A sibling is an element that shares the same parent with another element.

Selector.parent Method

The Selector.parent Method has three types of syntax which are parent(), parent(index) and parent(cssSelector).

The first method syntax looks as shown below, and it returns an array of parent elements, starting with the closest relatives.

  Selector().parent()

Here is how you can use the method in an example that selects all ancestors of all div elements.

   import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.inputClosestParents = Selector('input').parent(0);
       }
    }

    export default new TestCafeSelectors();

Here is how you can use the method in an example that selects all furthest ancestors of all inputs.

   import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.inputFurthestParents = Selector('input').parent(-1);
       }
    }

    export default new TestCafeSelectors();

The third method syntax looks as shown below and it looks for parent elements that match the CSS Selector parameter.

  Selector().parent(cssSelector)

Here is how you can use the method in an example that selects all divs that are ancestors of a form element.

   import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.formDivParents = Selector('form').parent(‘div’);
       }
    }

    export default new TestCafeSelectors();

Selector.child Method

The Selector.child Method has three types of syntax which are child(), child(n), and child(cssSelector). The first method syntax looks as shown below, and it returns an array of child elements, starting with direct descendants.

    Selector().child()

The method can be used in an example that selects all children of a form element, as shown below.

   import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.formChildren = Selector('form').child();
       }
    }

    export default new TestCafeSelectors();

The second method syntax looks as shown below, and it returns an array of n-th closest descendant elements.

  Selector().child(n)

If n is negative, the method returns an array of n-th most distant descendant elements.

The method can be used in an example that selects all the closest children of all div elements, as shown below.

    import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.formChildren = Selector('form').child();
       }
    }

    export default new TestCafeSelectors();

The second method syntax looks as shown below, and it returns an array of n-th closest descendant elements.

    Selector().child(n)

If n is negative, the method returns an array of n-th most distant descendant elements.

The method can be used in an example that selects all the closest children of all div elements, as shown below.

    import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.divClosestChildren = Selector('div').child(0);
       }
    }

    export default new TestCafeSelectors();

The method can also be used in an example that selects all furthest children of all div elements as shown below.

   import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.divFurthestChildren = Selector('div').child(-1);
       }
    }

    export default new TestCafeSelectors();

The third method syntax looks as shown below and it looks for element descendants that match the CSS Selector argument.


    Selector().child(cssSelector)

The method can be used in an example that selects all input elements that are children of a form element, as shown below.

   import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.formInputChildren = Selector('form').child(‘input’);
       }
    }

    export default new TestCafeSelectors();

Selector.sibling Method

The Selector.child Method has three types of syntax which are sibling(), sibling(n), and sibling(cssSelector). The first method syntax looks as shown below, and it returns an array of sibling elements, starting with the closest relatives.

    Selector().sibling()

The method can be used in an example that selects all siblings of all input elements, as shown below.

  import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.inputSiblings = Selector('input').sibling();
       }
    }

    export default new TestCafeSelectors();

The second method syntax looks as shown below and it returns an array of n-th closest sibling nodes.


    Selector().sibling(n)

If n is negative, the method returns an array of n-th most distant descendant sibling nodes.

The method can be used in an example that selects all div elements’ siblings that go first in their parent’s child list as shown below.

   import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.divClosestSiblings = Selector('div').sibling(0);
       }
    }

    export default new TestCafeSelectors();

The method can also be used in an example that selects all form elements siblings that go last in their parent’s child lists, as shown below.

    import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.inputFurthestSiblings = Selector('input').sibling(-1);
       }
    }

    export default new TestCafeSelectors();

The third method syntax looks as shown below and it looks for element siblings that match the CSS Selector argument.

 Selector().child(cssSelector)

The method can be used in an example that selects all input elements that are succeeding siblings of a form element, as shown below.


    import { Selector, t } from 'testcafe';

    class TestCafeSelectors {

       constructor() {
           this.formInputSibling = Selector('form').sibling(‘input’);
       }
    }

    export default new TestCafeSelectors();

Accessing Shadow DOM

Shadow DOM is a DOM tree with elements and styles isolated from the DOM. Shadow DOM differs from the regular DOM in that the main CSS does not affect the styling.

The Shadow DOM is completely encapsulated, keeping the markup structure, style, and behavior hidden and separate from other codes. The encapsulation is so that different parts do not clash, and the code can be kept nice and clean.

Some examples of shadow DOM are:

Embedded forms.
Embedded tweets.
Embedded YouTube videos.
Chat pop-ups.

When testing, you cannot access shadow DOM elements directly. To interact with the shadow DOM in TestCafe, identify the root node of a shadow tree, and use other selector methods to traverse it. You can identify the root node of a shadow tree using Selector.shadowRoot Method.

Selector.shadowRoot Method

This method returns the shadow root node chain to other methods to traverse the shadow DOM. The method returns null if the shadow DOM is not open and its syntax looks as shown below.

 selector.shadowRoot()

The example below shows how to identify the root node, access the shadow tree, and return the < p > element from the shadow DOM.

   import { Selector } from 'testcafe';

    fixture`ShadowDOM`
       .page`https://devexpress.github.io/testcafe/example/`;

    test('ShadowDOM Test', async t => {
       const shadowRoot = Selector('div').withAttribute('id', 'shadow-host').shadowRoot();
       const paragraph = shadowRoot.child('p');

       await t.expect(paragraph.textContent).eql('This paragraph is in the shadow tree');

       try {
           await t.click(shadowRoot);
       }
       catch (error) {
           await t.expect(error.code).eql('E27');
       }
    });

Let’s have a walkthrough of the code above.

Step 1: The selector function is imported from TestCafe to be used in the test code.

Step 2: A fixture called “ShadowDOM” is declared, where it represents a group of tests targeted by one URL.

Step 3: The Test.page method is used to specify the URL of the web page being tested.

Step 4: A test case called “ShadowDOM Test” is declared, where it is an asynchronous function that contains test code with a test controller object (t).

Step 5: A variable called “shadowRoot” is declared where its value is a “selector.shadowRoot method” that selects a “div” with attribute name “id” and attribute value “shadow-host.”

Step 6: A variable called “paragraph” is declared where it calls “shadowRoot” declared in step 5. The variable creates a method called “shadowRoot.child()” that returns an element child “p.”

Step 7: “t.expect.eql method” is used where the method asserts that the actual value is equal to the expected value. “paragraph.textContent” is the actual value while “This paragraph is in the shadow tree” is the expected value.

Step 8: Try statement is used to define a block code to be tested for errors while it is being executed. Also, a catch statement defines a block of code to be executed if an error occurs in the try block.

Note: In this case, the try statement will cause an error if the shadow root is targeted directly or used in assertions.

Check this out: Run Automated Puppeteer Testing Online

Test your Puppeteer test scripts online.

How to find Shadow DOM?

To identify shadow DOM in a web page:

Navigate to the web page and open the devtools as shown below.

2- Click the settings gear in the top-right corner of the devtools window to open settings as shown below.

3- Under the “Elements,” enable the “show user agent shadow DOM” checkbox as shown below.

4- Go back to devtools, and you should be able to identify shadow DOM, as shown below.

Watch this video to learn what Shadow DOM is and how to automate it using Selenium WebDriver.

Check this out: What is Regression testing: Complete Guide With Best Practices

Limitations of TestCafe Selectors

There are three types of TestCafe Selectors. These TestCafe Selectors are:

Keyword-Based TestCafe Selectors
Function-Based TestCafe Selectors
Selector-Based TestCafe Selectors

Keyword-Based TestCafe Selectors filter the page in search of elements that match a CSS selector. Function-Based TestCafe Selectors execute a client-side function that traverses the DOM. Selector-Based TestCafe Selectors execute or filter the results of another Selector query.

These TestCafe Selectors have limitations. These limitations are:

Selector queries cannot access user variables outside their scope.
Keyword-Based TestCafe Selectors and Selector-Based TestCafe Selectors do not accept custom arguments.
Function-Based TestCafe Selectors cannot contain generators or async/await keywords.

Check this out: Regression test: Complete Guide With Best Practices

Running tests using TestCafe on cloud Selenium Grid

As developers, when we create a web app and push it to production, users can access it using different browsers, browser versions, and operating systems. Your task as a developer or tester is to ensure that the web app performs as expected on all these browsers, browser versions, and operating systems.

To test the web app on all these browsers and operating systems, you need an in-house test infrastructure. Unfortunately, running and maintaining an in-house test infrastructure can be quite expensive. Using TestCafe and cloud Selenium Grid can be beneficial because it eliminates the need to invest in the maintenance of the in-house test infrastructure.

Cloud Selenium Grid provides you with an option to run tests on a range of virtual browsers, browser versions, and operating systems securely over the cloud. LambdaTest is one of the top cross browser testing platforms offering cloud Selenium testing, a secure, scalable, and reliable cloud-based Selenium Grid Infrastructure that lets you run tests at scale on an online browser farm of 3000+ browsers and operating systems.

Check this out: Mobile Emulator Online

Test your mobile websites and smartphone apps using our scalable on cloud mobile emulator.

You can follow the LambdaTest YouTube Channel for more such videos around Selenium testing, CI/CD, Cypress UI testing, and more.

To use LambdaTest Selenium Grid together with TestCafe to run your tests, you will need a LambdaTest account.

Navigate to the LambdaTest website and log in if you already have an account, or create one if you don’t have an account yet.

2- Once you are logged in, navigate to the automation page by clicking Automation on the left sidebar of your screen and selecting “Builds”

3- To use TestCafe with LambdaTest Grid, you need LambdaTest credentials (i.e., username and access key). To get the credentials, click the “Access Key” button on the right side of your screen.

4- Let us now save the credentials (username and access key) to environment variables LT_USERNAME and LT_ACCESS_KEY in our project.

5- To save username to environment variable LT_USERNAME and access key to LT_ACCESS_KEY on Linux/Mac, run the following commands.

  $ export LT_USERNAME= insert your username
    $ export LT_ACCESS_KEY= insert your access_key

6- For Windows, run the following commands.

    $ set LT_USERNAME= insert your username
    $ set LT_ACCESS_KEY= insert your access_key

7- To add these credentials to an environment variable in your project, run the following command on the Visual Studio command line.

   nano .bashrc

8- Then add your credentials as shown below.


    $ export LT_USERNAME= insert your username
    $ export LT_ACCESS_KEY= insert your access_key

9- Make sure you save the file by pressing CTRL + X and enter.

  npm install testcafe-browser-provider-lambdatest

11- Run the below-mentioned command to look at the browsers supported by the LambdaTest Selenium Grid:

testcafe -b lambdatest

12- Let us save our TestCafe credentials in our project so that our authentication on LambdaTest Selenium Grid goes through. You can save the credentials by running the commands below.

   $ set LT_USERNAME=*insert your username*
    $ set LT_ACCESS_KEY=*insert your accesskey*

Let’s assume you want to test the “First Name” input element of the e-commerce website registration page we mentioned earlier on a Chrome browser version 85.0 + macOS combination.

To define your desired set of browser and operating system combinations, you can use LambdaTest Capabilities Generator as shown below:

2- After setting your desired combinations, create a file called config.json and add your combinations as shown below without changing the code.

   {
       "Chrome@85.0:MacOS Catalina": {
           "build": "TestCafe Demo",
           "network": true,
           "visual": true,
           "resolution": "1024x768"
       }
    }

3- Navigate to the e-commerce website registration page. Inspect the web page and get the ID locator of “First Name” input which the user is expected to fill when registering for an account, as shown below.

4- The next step is to add the “First Name” ID locator to the Page Object Model. as shown below.

    import { Selector, t } from 'testcafe';

    class TestCafeSelectorsID {

       constructor() {
           this.firstnameInput = Selector('#input-firstname');
       }
    }

    export default new TestCafeSelectorsID();

5- Since we already declared the Selector in the page model and imported it to our test file, let us add “firstnameInput’, which is the name we gave the selector, as our first parameter in the “.typeText” TestController as shown below in the final code.

   import TestCafeSelectorsID from "../PageModel/SelectByID";

    const pageURL = 'https://ecommerce-playground.lambdatest.io/index.php?route=account/register'

    fixture('Registration Page')
       .page(pageURL)

    test("FirstName", async t => {
       await t
           .typeText(TestCafeSelectorsID.firstnameInput, 'John')
    });

6- To run a test on (Chrome 85.0 + MacOS Catalina) combination, run the command below.

    testcafe "lambdatest:Chrome@85.0:MacOS Catalina" TestCase/Tests/SelectByIDTest.js

7- If you visit your LambdaTest Dashboard on the right side of your screen, you should be able to see your recent tests, as shown below.

If you are a developer or a tester, this certification will acknowledge your expertise in using JavaScript to create automated browser tests. The Selenium JavaScript 101 certification is a globally-recognized certification that proves your expertise and skill in using Selenium with JavaScript.

Conclusion

With this, we have reached the end of this TestCafe tutorial on TestCafe Selectors. As you have seen from the examples used in this TestCafe tutorial, TestCafe Selectors are similar to CSS Selectors in both purpose and syntax. We have learned about TestCafe Selectors and how to use them to select page elements.

We further deep-dived into accessing Shadow DOM and showcased how to perform TestCafe testing on a cloud Selenium grid like LambdaTest.

Happy Testing!