Unpacking test.step() Function

Automating the end-to-end testing process is important in test automation. Identifying where a test has failed can be challenging, especially for tests with multiple steps. Fortunately, Playwright’s test.step() funtion can help quickly identify the point of failure and the underlying problem.

By default, the automated test report includes all user actions and assertions, with the corresponding code visible when expanded. However, interpreting the report can become difficult when a test fails, as the details are at a granular level and lack a bird’s-eye view.

The report that was generated after executing the test.

The test.step() function declares a step by accepting the name of the step and a callback function with the code to be tested as arguments. The function returns the value returned by the step callback. The screen capture of the report generated for the same tests is written using test.step().

This report details the results obtained from using the test.step() function.

given below is the modified test written using test.step() the function

test('Membership Form Test', async ({ page }) => {
    await page.goto('<https://owasp.org/membership/>');

const fieldsToTest = [
        { locator: '[aria-label="Email Address"]', 
          placeholderValue: 'Member Address', 
          value: 'email.testing@gmail.com' },
        { locator: '[placeholder="Confirm Member Email Address"]', 
          placeholderValue: 'Confirm Member Address', 
          value: 'email.testing@gmail.com' },
        { locator: '[aria-label="Company Name"]', 
           placeholderValue: 'Company Name', 
          value: 'Testing Company' },
        { locator: '[aria-label="Name"]', 
          placeholderValue: 'Member Name', 
          value: 'New Member' }
    ]
    for (const item of fieldsToTest) {
        await test.step(`Validating and entering ${item.placeholderValue}`, async () => {
            await validateAndFill(page, item.locator, item.placeholderValue, item.value);
        })
    }
    expect(test.info().errors).toHaveLength(0);
});
async function validateAndFill(page: Page, locator: string, placeholderValue: string, value: string) {
    const element = page.locator(locator);
    expect.soft(await element.getAttribute('placeholder')).toBe(placeholderValue);
    await element.fill(value);
}

My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.

Playwright's Cookbook: Recipes with Typescript