Fixtures are really important to manage the testcases or divide the testcases into categories. In this tutorial, will see examples to use fixtures in testcafe.

What are fixtures in Testcafe

Fixtures are used to divide the list of testcases or bulk testcases into categories. It will help to manage the testcases module-wise like login, registration, Data uploading, etc. it depends on the automation requirements.

Simply, we can define fixture "fixture_name"it in the test.js file.

How to use fixtures in Testcafe

To use fixtures in testcafe, Simply write the fixture function with the name of categories. in the below code, “loginpage” is a fixture

fixture `LoginPage`
test('My first test case', async t => {
    // Test code
});

Can we write multiple tests in a testcafe fixture?

Yes, We can write multiple testcase scripts in a single fixture. there is no limit.

fixture `Date_Picker_Testcases`
    .page `https://www.seleniumeasy.com/test/bootstrap-date-picker-demo.html`;

test('My first test for Home Page', async t => {
    // Test code
});

test('My first test case', async t => {
    // Test code
});

Can we write multiple fixtures in a testcafe test file?

Yes, We can write multiple fixtures in one test.js file. below is the example.

fixture `LoginPage`
test('My first test case', async t => {
    // Test code
});

fixture `Date_Picker_Testcases`
    .page `https://www.seleniumeasy.com/test/bootstrap-date-picker-demo.html`;

test('My first test for Home Page', async t => {
    // Test code
});


fixture `From Page Testcases`
    .page `https://www.seleniumeasy.com/test/basic-first-form-demo.html`;

test('My first test for Input', async t => {
    // Test code
});

How to run tests for a specific fixture?

Let’s assume we have multiple fixtures in a single test.js  file and we need to run only testcases of the single fixture then you just need to specify the name of the fixture with the run command. testcafe chrome test.js -f "Date_Picker_Testcases"

testcafe chrome test.js -f "Date_Picker_Testcases"

How to open the page with a testcafe fixture?

.page function is used to open a webpage in testcafe. To open a webpage with testcafe fixture just write the code

.page `URL Name`;

t.fixtureCtx  allow to access the global variable in testcafe that will be defined into the fixture with ctx. ctx.Name = "Bhupi..";

In the below testcafe example, I have defined one global variable ctx.Name = "Bhupi..";that will call into the testcase by using t.fixtureCtx.Name

import { Selector } from 'testcafe';

fixture `Testcafe Automation tutorial`
    .before(async ctx  => {
    ctx.Name = "Bhupi..";
    })
    .page `https://devexpress.github.io/testcafe/example/`

test('Testcafe Define and access gloabl variable', async t => {
    const nameInput = Selector("#developer-name");
    await t .typeText(nameInput, t.fixtureCtx.Name)
    .wait(5000)
});