Playwright Tutorial | Pass Test data as Fixtures

• 00:00 Channel Rebranding and Test Data as Fixtures
• 01:00 Using Orange HRM Website for Practical Demonstration
• 02:00 Explaining the Recruitment Module Test
• 03:00 How to Create a Fixtures File
• 05:00 Describing the Login and Test Data Fixtures
• 08:00 Using Fixtures in Test Script
• 13:00 Running the Test and Viewing the Report
• 16:00 Recap of the Entire Process

Hey everyone! Welcome back to my channel, which has now been renamed from 'test code automate' to 'wish infinite'. In today's video, we'll discuss how to pass test data as fixtures.

When using fixtures to pass test data, it only supports one set of data, meaning we can't parameterize our tests. In my previous videos, I covered reading test data from JSON and CSV formats, which allowed passing single and multiple sets of data for parameterized tests. If you haven't watched those videos, I recommend checking them out through the links in the description or the 'I' button at the top right corner.

Practical Example

For this tutorial, I'll use the Orange HRM website. Here's the scenario: I'll log into the application, navigate to the recruitment module, add a candidate by providing their first, middle, and last names, along with their email ID, and save the information. The script will then validate if the application stage heading appears on the page.

You can find the test script in the VS Code editor under the test folder. The script logs into the application using the correct username and password, clicks the add button, enters the candidate's details and saves them. Once the candidate is saved, it validates if the application stage heading is visible.

Creating Fixtures

If you haven't watched my previous videos on creating fixtures, I recommend you watch them first to understand how to create and use fixtures in conjunction with the Page Object Model (POM) and before-and-after hooks. Links to these videos are available in the description or via the 'I' button at the top right corner.

To create a fixture file, create a new file named testDataFixture.ts inside the fixtr folder. This TypeScript file will import the test from the Playwright test module, log in to the application, and add the candidate's data.

import { test as baseTest } from '@playwright/test';

type MyFixtures = {
  loginData: {
    username: string,
    password: string
  },
  testData: {
    firstName: string,
    middleName: string,
    lastName: string,
    email: string
  }
};

const test = baseTest.extend<MyFixtures>({
  loginData: { username: 'admin', password: 'admin123' },
  testData: { firstName: 'John', middleName: 'D.', lastName: 'Doe', email: '[email protected]' }
});
export { test };

In the test data fixture file, we extend the base test with the fixtures for login data and test data. This allows us to pass the necessary data to our test script file.

Next, import the fixtures into your test script file. Instead of importing the test and expect from the Playwright module, import them from the fixture file. This way, you can use the fixtures' keys to access the data.

import { test, expect } from '../fixtures/testDataFixture';

test.beforeEach(async ({ page, loginData }) => {
  await page.goto('your-app-url');
  await page.fill('input[name="username"]', loginData.username);
  await page.fill('input[name="password"]', loginData.password);
  await page.click('button[type="submit"]');
});

test('should add a candidate', async ({ page, testData }) => {
  await page.click('text="Recruitment"');
  await page.click('text="Add"');
  await page.fill('input[name="firstName"]', testData.firstName);
  await page.fill('input[name="middleName"]', testData.middleName);
  await page.fill('input[name="lastName"]', testData.lastName);
  await page.fill('input[name="email"]', testData.email);
  await page.click('text="Save"');
  expect(page.locator('text="Application Stage"')).toBeVisible();
});

This code demonstrates how to use the data from the fixtures within your test script. By accessing the key values from the fixtures, you ensure your test script uses the correct data during execution.

To run your tests, use the command npx playwright test. This will execute all the test files in your test folder. For instance, running the above script will log in to the application, navigate to the recruitment module, add a candidate, and validate if the application stage heading is visible.

Finally, if you want to generate an HTML report, run the command npx playwright show-report.

That's it for this video. If you want to continue learning, you can check out the next video by clicking the first card or view the complete Playwright tutorial playlist by clicking the second card. Stay tuned for more content and feel free to leave your questions, comments, or suggestions below. Don't forget to like, share, and subscribe. Thank you and have a great day!