Tutorial 8 – Hook and Parallel Test Execution in Playwright
What you will Learn in this blog:
beforeEach hook
Execute Tests in Parallel
Code snippet
beforeEach hook
Sometimes we might want to execute a specific piece of code before executing the test(s). As an example, let us suppose we have 10 tests and each one of them has a step to launch the same website, example below
Now, it’s not a good idea to include the above piece of code in all the 10 tests
Instead, we can write this piece of code (to launch website) only once. This is where ‘hooks’ come into picture.
The code (to launch website) can be written as part of ‘beforeEach’ hook and the code under this hook will be executed before each test. Hence, if we have 10 tests, the ‘beforeEach’ hook will automatically be called 10 times.
Let us see a practical example.
Launch http://zero.webappsecurity.com/online-banking.html
Notice that on this webpage, we have h1 and h3 elements
Let us create a describe annotation having 2 simple tests. Both the tests are launching the same webpage (lines 5 and 11), see below
Before we add a hook, let us quickly execute the above test to make sure it passes
Next, select any test and copy it
Paste the test before both the tests, remove the test description (see lines 4-6)
Next, type ‘test.beforeEach’
Hit Enter
Next, copy line#9 (url) and paste it inside the ‘beforeEach’ hook (line#5)
Comment lines 9 and 15 as shown below
Save the file and execute.
Notice below that the test passes this time as well
Similarly we can use ‘afterEach’ hook to execute some piece of code after every test.
Execute Tests in Parallel
To save time, sometimes we might want to execute our tests in parallel. But before we see how to do that, let us execute the 2 tests
Notice below few things:
a) the 2 tests are running using 1 worker
b) first test took 22s and second took 3s
c) total time taken is 30s
Now let us use the ‘parallel’ method, see line#3 below
Save and execute.
Notice below few things:
a) the 2 tests are running using 2 workers
b) both the tests started executing simultaneously
c) first test took 10s and second test also took 10s
d) total time taken is 20s
So this is how we can use parallel testing to execute our tests faster.
Code snippet
import {test,expect} from '@playwright/test'
test.describe.parallel('test suite', () => {
test.beforeEach(async ({ page }) => {
await page.goto('http://zero.webappsecurity.com/online-banking.html')
})
test('working with forms', async ({ page }) => {
// await page.goto('http://zero.webappsecurity.com/online-banking.html')
const elem = await page.locator('h1')
await expect(elem).toBeVisible()
})
test('working with assertions', async ({ page }) => {
// await page.goto('http://zero.webappsecurity.com/online-banking.html')
const elem = await page.locator('h3')
await expect(elem).toBeVisible()
})
})
Thank you for reading!
