Playwright interview questions and answers: Part 3

 

 21. How to Generate and Open a Report in Playwright ?

There are two common ways to generate reports in Playwright.

1. From the Command Line

To generate an HTML report while executing tests, run:

npx playwright test --reporter=html

 

After the execution finishes, open the report using:

npx playwright show-report

2. From the playwright.config.js File

Configure the reporters in the Playwright configuration file:

export default defineConfig({

  reporter: [

    ['list'],

    ['html', { open: 'never' }],

    ['json', { outputFile: 'test-report.json' }],

  ],

});

Playwright provides built-in reporters, including List, HTML, and JSON.

• List: Displays test execution results in the terminal.
• HTML: Generates an interactive HTML report.
• JSON: Generates a JSON report, which is useful for further processing. In this example, the report is saved as test-report.json in the project root directory.

Common HTML Reporter Options

• ['html', { open: 'never' }]: Generates the HTML report but does not automatically open it.
• ['html', { open: 'always' }]: Generates the HTML report and automatically opens it after the test run.
• ['html', { open: 'on-failure' }]: Automatically opens the HTML report only if the test run fails.

Note: The default HTML reporter option is open: 'on-failure'.

 

22. How to Handle Multiple Tabs in Playwright?

In Playwright, we use context.waitForEvent('page') to detect a newly opened tab and then interact with it.

Example (JavaScript)

import { test, expect } from '@playwright/test';

test('Handle multiple tabs', async ({ page, context }) => {

  await page.goto('https://example.com');

  // Open a new tab by clicking a link

  const newTabPromise = context.waitForEvent('page');

  await page.getByText('Open new tab').click();

  const newTab = await newTabPromise;

  // Interact with the new tab

  await newTab.waitForLoadState();

  console.log(await newTab.title());

  await expect(newTab).toHaveTitle('HomePage');

});

In simple terms

• context.waitForEvent('page') — Waits for a new tab or page to open.
• newTab — Represents the newly opened tab.
• We use newTab to interact with elements in the new tab.

 

23. What are the different timeouts and how to add or apply them in Playwright?

The different timeouts in Playwright are :

Timeout per test

Timeout per assertion

Timeout per action

Timeout per navigation

Global Timeout.

They can be applied from

1.     playwright.config.js file

2.     from the code

3.     from the command line while executing.

 

Some points to remember :

-Timeout added in the playwright.config.js is the default timeout.

-Timeout added in the code overrides the timeouts in the playwright.config.js. Note that the global timeout cannot be configured at the test-code level.

-Timeout added in the command line, while executing the test, overrides the timeouts configured in the playwright.config.js. Note that only the test timeout and global timeout can be set directly through the terminal command line.

 

24. How can you set or configure the timeouts in playwright.config.js ?

From the playwright.config.js file, we can configure the timeouts as mentioned below. The timeouts configured in the playwright.config.js file are the default timeouts. If the timeouts are applied in the test code level or in the terminal command line, these timeouts will be overridden depending upon the type of timeout.

export default {

    timeout: 30000,             // Timeout for each test

    expect: {

        timeout: 5000             // Timeout for each assertion

    },

    use: {

        actionTimeout: 10000,      // Timeout for actions such as click or fill

        navigationTimeout: 20000   // Timeout for navigation

    },

     globalTimeout: 50000         // Timeout for the entire test run

};

 

25. How can we add the timeouts at the code level ?

1. Test timeout(single test)

test.setTimeout(30000); // 30 seconds

2. Assertion timeout

await expect(locator).toHaveText('Hello', { timeout: 5000 });

3. Action timeout(Click, fill)

await page.getByRole('button').click({ timeout: 10000 });  // for click

await page.locator('textbox').fill('text to fill', { timeout: 10000 }); // for fill

4. Navigation timeout

await page.goto('https://example.com', { timeout: 20000 });

5. Global timeout(entire test run) : This can not be added in the code level.

26. How can you apply timeouts from the terminal command line ?

For Test timeout(single test):

                          npx playwright test --timeout=30000

          For Global timeout :

                        npx playwright test --global-timeout=60000

27. How can we use tag in the Playwright test ?

Tags can be used to group the tests. And we can execute the tests selecting the required tags. To mention a tag in the test, we use “@” just before the tag name.

For example(java script):

Import {page, expect} from ‘@playwright/test’ ;

Test(‘this smoke test @smoke’,({page})=> {

               await page.goto('https://example.com');

               await expect(page).toHaveTitle(‘Example’);

});

 

To execute, write below command in the terminal:

               npx playwright test --grep "@smoke"

28. How can we use multiple tags ?

Multiple tags example:

Import {page, expect} from ‘@playwright/test’ ;

Test(‘this smoke test @smoke @regression @functional’,({page})=> {

               await page.goto('https://example.com');

               await expect(page).toHaveTitle(‘Example’);

});

 

 To run:

Suppose we need to run the smoke and functional tests only, write below command in the terminal, use OR (“|” ) operator with “- -grep” in the command-line.

               npx playwright test --grep "@smoke|@functional"

 

29. How can we skip a tag in test execution?

Let’s take example of above test.

To run all the tests skipping Regression tests, we can use “- -grep-invert” in the command-line.

npx playwright test --grep-invert "@regression"

30. How can we run all the tests which are not having tags ?

Let’s take example of above test.To run all the tests which do not have any tags, we can use “- -grep-invert” with a regex as mentioned in the below command-line code.  

 

 npx playwright test --grep-invert "@\w+"