Chapter 4.10 - Working with Client-Side Info

TestCafe allows you to create client functions that can return any serializable value from the client-side, such as the current URL or custom data calculated by a client script.

For example, in this code snippet, we are checking the page URL.

import { ClientFunction } from 'testcafe';

fixture `My Fixture`
    .page `http://devexpress.github.io/testcafe/example`;

//Returns the URL of the current web page
const getPageUrl = ClientFunction(() => window.location.href);

test('Check the page URL', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button') //Redirects to the 'Thank you' page
        .expect(getPageUrl()).contains('thank-you'); //Checks if the current page URL contains the 'thank-you' string
});

So here, we are importing the client function from TestCafe, something like the import Selector that we are using in our demos. Then in our fixture, we are adding the fixture.page() with the URL, and then, we need to add one constant with getPageURL.

With ClientFunction, we need to get window.location.href, which will get us that current page URL. And we use this constant in our method in our test case and expect that getPageURL contains thank-you, for example. So we are checking if the current page URL contains the thank-you string.

So with different examples, we can use the client-side to get any data or any custom data calculation from the client-side script. We are not hitting any server-side code, but it's only from the browser and from the client-side script.

# Client-Side Demo

In this demo, we will learn how to work with the client-side and check the page URL function with JavaScript and TestCafe. We will use our firstSelectorTest.js case - we will copy this file and rename it clientFunctionTest.js.

After that, the first step is to import the client’s function from TestCafe. We already imported the Selector from TestCafe, so we can add a comma because it's an array of imports, and add ClientFunction.

After that, we need to add one constant - getPageURL - that equals the ClientFunction and then we will open the function, use the arrow function to simplify our tests, and then we can say window.location.href, close the function, and here we go.

So getPageURL will use ClientFunction to get the window.location.href, which always contains the current URL from the browser.

So far we have:

import {Selector,ClientFunction} from 'testcafe';

const developerName = Selector("#developer-name");
const osOption = Selector("#macos");
const submitButton = Selector("#submit-button");

const getPageURL = ClientFunction(() => window.location.href); 

fixture("First Fixture")
    .page("https://devexpress.github.io/testcafe/example/");

test("First Test", async t => {
 await t
        .typeText(developerName,"TAU")
        .click(osOption)
        .click(submitButton)
});

After we click on the submit button here, we can expect or assert that getPageURL contains a value - this returns a string URL, and then we need to search for the value in the URL.

Let's open this URL and then check what happens after we click submit. So here we will click on this URL. We will click in the textbox and enter "TAU", and click "macOS" for the primary operating system, and then we will click the submit button.

Then we have here "thank-you" in the URL. So in our test, we need to assert the URL contains "thank-you."

import {Selector,ClientFunction} from 'testcafe';

const developerName = Selector("#developer-name");
const osOption = Selector("#macos");
const submitButton = Selector("#submit-button");

const getPageURL = ClientFunction(() => window.location.href); 

fixture("First Fixture")
    .page("https://devexpress.github.io/testcafe/example/");

test("First Test", async t => {
 await t
        .typeText(developerName,"TAU")
        .click(osOption)
        .click(submitButton)
        .expect(getPageURL()).contains('thank-you');
});

So now it's time to run our test:

testcafe chrome tests/clientFunctionTest.js

We will run clientFunctionTest to assert that after we click the submit button, the URL contains "thank-you" using the ClientFunction with TestCafe. So here we open that browser, click, the
The "Thank you" page is displayed and our test is passed.

Resources

Add AI to your existing test scripts in minutes!