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

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

Note: 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.

• 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:

• Run the command below on your terminal to install TestCafe.

npm install testcafe.

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

testcafe -v

As you can see below, I am using TestCafe version 1.18.4


• Run the command below to create a Package.json file.

npm init

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

• 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.

Note: Run TestCafe Tests on the cloud! Try TestMu AI Now!

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 TestMu AI 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 “[email protected]” 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”.

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

• 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();

• 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.
• 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.

• 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.
• 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.
• 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();

• 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.

• 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";

• 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'

• 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)

• 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 => {
   
});

• 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
       
});

• 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.
• 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.
• 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, '[email protected]')
       .typeText(SignupPage.telephoneInput, '0712345678')
       .typeText(SignupPage.passwordInput, 'Qwerty123!')
       .typeText(SignupPage.confirmInput, 'Qwerty123!')
       .click(SignupPage.agreeBtn)
       .click(SignupPage.continueBtn);
});

• 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

• 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 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. TestMu AI is one such platform that provides a secure, scalable, and super reliable cloud-based Selenium Grid infrastructure that lets you run tests at scale.

TestMu AI 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. TestMu AI Selenium Grid also allows you to perform parallel testing.

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

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

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

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

• Let us now save the credentials (username and access key) to environment variables LT_USERNAME and LT_ACCESS_KEY in our project.
• 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

• For Windows, run the following commands

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

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

nano .bashrc

• Then add your credentials as shown below.

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

• Make sure you save the file by pressing CTRL + X and then press enter.
• TestMu AI has an npm plugin that allows you to integrate TestCafe with TestMu AI 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

• Run the below-mentioned command to have a look at the browsers supported by the TestMu AI Selenium Grid:

testcafe -b lambdatest

• Let us save our TestCafe credentials in our project so that our authentication on TestMu AI 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 TestMu AI Selenium Grid.

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 TestMu AI Capabilities Generator as shown below:

• 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

{
   "[email protected]:MacOS Catalina": {
       "build": "TestCafe Demo",
       "network": true,
       "visual": true,
       "resolution": "1024x768"
   },


   "[email protected]:Windows 10": {
       "build": "TestCafe Demo",
       "network": true,
       "visual": true,
       "resolution": "1024x768"
   },


   "[email protected]:Windows 11": {
       "build": "TestCafe Demo",
       "network": true,
       "visual": true,
       "resolution": "1024x768"
   }
}

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

testcafe "lambdatest:[email protected]:MacOS Catalina" TestCafeTests/Tests

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

testcafe "lambdatest:[email protected]:Windows 10" TestCafeTests/Tests

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

testcafe "lambdatest:[email protected]:Windows 11" TestCafeTests/Tests

• 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.

• If you visit your TestMu AI Dashboard on the right side of your screen, you should be able to see your recent tests, as shown below.

• 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.

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

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 TestMu AI: