Playwright Interview Questions that you are going to hate

Questions were created with the idea to trick you, so don't be too hard on yourself if you don't get them right. Also, some answers have an explanation and even code examples. Scroll all the way to the bottom for that. Remember, this is functional code with real URLs used, so feel free to try the code out, copy paste it and see for yourself.

1. The local environment

If you would run your tests on your local machine using your local environment that you need to setup and get it up and running, for example at http://localhost:3000/ , how would you handle the local environment setup during test runs?

Possible answers:

• Start up your local environment prior to running your tests
• Write a script in package.json to start local environment and run your tests
• Use webServer

2. The contain comparison

Other than the fact that one takes a locator and the other a value, what is the main difference between the followings:

await expect(locator).toContainText()

and

await expect(value).toContain()

3. The delayed load

At the URL below, text "Loading complete" will appear after 10 seconds. Our test is failing at the expect step with Expected: visible , Received: hidden. How could you fix this test ?

test("The visible methods", async ({ page }) => {
  await page.goto("https://webdriveruniversity.com/Accordion/index.html");
  await expect(page.getByText("LOADING COMPLETE.")).toBeVisible()
});

4. The self-healing

Knowing that magento.softwaretestingboard.com has a menu item called "Sale" that upon clicking it will navigate to a new page. Complete the test below with writing a new step that will click on "Sale" menu option but create for that element a self-healing locator

test("The self-healing", async ({ page }) => {
  await page.goto("https://magento.softwaretestingboard.com/");
  await page.getByLabel('Consent', { exact: true }).click()
});

5. The closed browser

What is this code going to do:

test("The closed browser", async ({ page }) => {
  await page.goto("https://blog.martioli.com/");
  await page
    .getByRole('link', { name: 'About' })
    .click();
  expect(page).toHaveURL(/about/);
});

Possible answers:

• Test will fail because About is a button not a link
• Test will error out about target page
• Test will fail because of the argument passed to .toHaveURL()

6. The reference

Knowing that the element clicked on the second step is a backlink on a page, what is this code going to do:

test("The reference", async ({ page }) => {
  await page.goto("https://blog.martioli.com/playwright-tips-and-tricks-1/");
  await page
    .locator('section').locator('p').locator('a').getByText('buy me a coffee').click()
  await expect(page).toHaveURL(/blog.martioli.com/)
});

Possible answers:

• Test will fail because 'buy me a coffee' is a link and we navigated away from martioli.com
• Test will pass
• Test will fail because you cannot mix locator().locator().locator()

7. The other locales

Modify the test below and have it run with a different locale, for example german.

test("The locale", async ({ page }) => {
  await page.goto("https://www.google.com/");
});

8. The CSS properties

Given the code below how could you improve it for readability and simplicity.

test("The css properties", async ({ page }) => {
  await page.goto("https://magento.softwaretestingboard.com/");
  await page.getByLabel('Consent', { exact: true }).click()
  
  const element = page.getByText("Shop New Yoga")
  const backgroundColor = await element.evaluate((el) => {
    return window.getComputedStyle(el).getPropertyValue('background-color');
  });
  expect(backgroundColor).toBe("rgb(25, 121, 195)")
});

9. The long click

Given the code below, how would you modify the click step to simulate hold left mouse button for 3 seconds and then release mouse button.

test("The long click", async ({ page }) => {
  await page.goto("https://www.clickspeedtester.com/mouse-test/");
  await page.getByRole('link', { name: 'Second Clicker' }).click()
});

10. The force

The page has a data consent popup modal that you have to comply with. The "search" button is hidden behind this modal. Given the following code. What will it happen

test("The force", async ({ page }) => {
  await page.goto("https://www.google.com/");
  
  // the search input field
  await page.locator('textarea').first().fill("martioli")
  // the search button
  await page.locator('[type=submit][name="btnK"]').last().click({ force: true })
});

Possible answers:

• Test will pass. I am using {force:true} , it will click the button and results will show behind the modal
• Test will pass, but no results shown behind the modal
• Test will fail, timeout, because it cannot click on the button behind the modal

11. The baseUrl

I have my baseUrl set up in my config file. What is this code going to do:

test("The baseurl", async ({ page }) => {
  await page.goto('');
});

Possible answers:

• Test will fail. I forgot the / between the quotes
• Test will fail because .goto() needs double quotes
• Test will pass

12. The workers

Given the below configuration about workers. If I run a suite of 100 tests, how would they run:

module.exports = defineConfig({
  testDir: "./tests",
  workers: "5%",

  projects: [
    {
      name: "chromium",
      use: { ...devices["Desktop Chrome"] },
    },
  ],
});

Possible answers:

• Tests will run very slow with only 5% power of the workers
• Test will run on 5% of how many CPU cores you have.
• Test will not even start because you cannot set values in percentages for workers

Hit the clap button if you found this useful. Or even buy me a coffee if you want to motivate me even more.

Playwright interview questions that you are going to love

Playwright interview questions for Mid and Senior level quality assurance automation engineers

MartioliAdrian Maciuc

My blog has a members section. Its free to join, there is no spam and you get access to members only content. Become a member now and you will also be the first to receive in your email when I publish a new article.

Content below is visible to members only