How to Run Playwright Tests Sequentially in Same Browser Context

The Playwright is a new automation framework by Microsoft. The Playwright framework is distributed under MIT Open Source License. Playwright supports various programming languages such as Java, JavaScript, TypeScript, .Net, etc. 

Playwright Executes Each Scenario in Its Own New Browser Context

If you have worked with the Playwright framework you might have observed that if you write multiple tests inside the describe function, it gets executed one after another but each test runs in a separate browser context. That means that if you have performed a login in test1() it doesn't preserve those in test2(). The reason is that each time playwright executes the test, it creates a new context and executes the test. This feature also allows you to write independent tests and you can execute them parallelly with less execution time.

If you are familiar with protractors or if you are looking for a solution where tests inside the single file should be executed in a step-by-step fashion, then this article is for you. Many people searched on the internet the below questions:

1. How to execute Playwright test in single/same browser context?
2. How to disable Playwright parallel execution at test level?
3. How to define browser context in Playwright? 
4. How to execute Playwright tests sequential way?

Let's understand the problem first by looking at the below code (which are test fails):

// This test doesn't pass

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

test.describe('test',async()=>{
  test('Navigate to Google', async ({page}) => {
    await page.goto('https://google.com/');
    const url=await page.url();
    expect(url).toContain('google');
  });

  test('Search for Playwright', async ({page}) => {
    await page.type('input[name="q"]',"Playwright")
    await page.keyboard.press('Enter');
    let text=await page.innerText('//h3[contains(text(),"Playwright:")]')
    expect(text).toContain('Playwright: Fast and reliable');
  });
});

The above code doesn't work. There are two tests inside the describe block:

1. test(Navigate to Google): Where we are navigating to
2. test(Search for Playwright): We are assuming that in the first test we have already navigated to Google so we are permiting tests

If we are from another framework background you might think that first, you should navigate to google.com, and then you type playwright in the second test. However, in Playwright, it doesn't work that way. Both of the tests run in a separate context since we are passing {page} as an argument to the test function. Even if you run with workers=1, the above test fails.

Let's dive into the solution to the above problem.

Running Playwright Tests/Scenario Inside the Describe Block Sequentially in the Same Browser Context

If you are looking for a solution like scenarios inside the Playwright describe block, you should execute one after another in the browser. By preserving the previous state, you can modify your tests below.

1. Define the Page Instance in beforeAll()

//inside your describe block  
let page:Page; //create variable with page
  test.beforeAll(async ({browser}) =>{
    page = await browser.newPage(); //Create a new Page instance
  });

2. Do Not Pass the Page as a Parameter to Your Tests

//inside describe block, after beforeAll()  
test('Navigate to Google', async () => {
    await page.goto('https://google.com/');
    const url=await page.url();
    expect(url).toContain('google');
  });

  test('Search for Playwright', async () => {
    await page.type('input[name="q"]',"Playwright")
    await page.keyboard.press('Enter');
    let text=await page.innerText('//h3[contains(text(),"Playwright:")]')
    expect(text).toContain('Playwright: Fast and reliable');
  });

If you look at the above code, the test() doesn't have {page} context passed as an argument here, so it takes from the page which we have initiated under the beforeAll(). 

Putting Everything Together

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

test.describe('test', async () => {
  let page: Page;
  test.beforeAll(async ({ browser }) => {
    page = await browser.newPage();
  });

  test('Navigate to Google', async () => {
    await page.goto('https://google.com/');
    const url = await page.url();
    expect(url).toContain('google');
  });

  test('Search for Playwright', async () => {
    await page.type('input[name="q"]', "Playwright")
    await page.keyboard.press('Enter');
    let text = await page.innerText('//h3[contains(text(),"Playwright:")]')
    expect(text).toContain('Playwright: Fast and reliable');
  });
});

Note: Playwright recommends running each test in a separate context.

With the above approach, your tests run just like any other framework code in the same browser context.

If you need any help, support, guidance contact me on LinkedIn.