Tutorial 7 – Tagging and taking screenshots in PW
What you will Learn in this blog:
Tagging intro
Tagging the tests
Execute the tagged tests
Ignore the execution of tagged tests
Take complete page screenshot
Take screenshot of a specifc element on a page
Complete code snippet
Tagging intro
In the previous blog, we had discussed about annotations. Now let us study about ‘Tagging’ which is an extension of annotations.
PW allows us to tag our tests and then allows us to run the group of tests using specific tags. So let us see how to tag our tests and how to execute our tests using specific tags.
Tagging the tests
Below is a snapshot from our previous blog that comprises of 2 tests
Let us suppose we want to tag ‘working with forms’ test
Below is the syntax. At the end of test description, we have to put @symbol followed by desired tagname
Let the tagname be ‘dryRun’
Save the file.
Execute the tagged tests
Below is the syntax to execute the test:
npx playwright test --grep @<tagname>
Execute test, notice below that only the test ‘working with forms’ got executed. The other test got ignored
Let us put the same tagname in another test. So now we have 2 tests having the same tagname @dryRun
Save and execute the test.
Notice below that both the tests got executed this time
Ignore the execution of tagged tests
We can do the reverse as well viz we can ignore the execution of tests that are tagged with specific tag names. Let us see how.
Below is the syntax to ignore the test having specific tagname:
npx playwright test --grep-invert @<tagname>
Let us tag the ‘working with forms’ test with @prod and other test with @dryRun
Save the file and execute:
npx playwright test --grep-invert @dryRun
Notice below that the tag @dryRun was NOT executed, the other one got executed
Let us now execute below command:
npx playwright test --grep-invert @prod
Notice below that tag @prod was NOT executed, the other one got executed
Take complete page screenshot
While the test is running, we might want to take the screenshot of complete page. There is a ‘screenshot’ method available to achieve this. Let us create a new test.
The screenshot method accepts 2 arguments: path of screenshot and fullpage (true or false)
Save and execute
Notice below that the file ‘screenshot.png’ gets automatically generated
Click this file, notice below that entire page screenshot is visible
Take screenshot of a specifc element on a page
Launch http://zero.webappsecurity.com/login.html
Let us suppose we want to capture the screenshot of only a single element header ‘h3’, see below
Create a new test. In line#32, just write page.
As soon as we write dot, the first method that we would see would be $ that can be used to find an element
So let us put $(‘h3’), see line#32 below
Line#33 is self-explanatory.
Save an execute
The png file gets generated
Click the file, notice below that only the single element got captured
So this is how we work with tagging and screenshots.
Complete code snippet
import {test,expect} from '@playwright/test'
test.describe('test suite', () => {
test('working with forms @dev', async ({ page }) => {
await page.goto('http://zero.webappsecurity.com/index.html')
await page.click('#signin_button')
await page.type('#user_login','username')
await page.type('#user_password','password')
await page.click('text=Sign in')
})
test('working with assertions @dryRun', async ({ page }) => {
await page.goto('http://zero.webappsecurity.com/login.html')
await expect(page).toHaveURL('http://zero.webappsecurity.com/login.html')
await expect(page).toHaveTitle('Zero - Log in')
const elem = await page.locator('h3')
await expect(elem).toBeVisible()
await expect(elem).toHaveText('Log in to ZeroBank')
await expect(elem).toHaveCount(1)
})
})
test.only('fullpage screenshot', async ({ page }) => {
await page.goto('http://zero.webappsecurity.com/index.html')
await page.screenshot({path: 'screenshot.png', fullPage: true})
})
test.only('element screenshot', async ({ page }) => {
await page.goto('http://zero.webappsecurity.com/login.html')
const element = await page.$('h3')
await element?.screenshot({path: 'element_screenshot.png'})
})
Thank you for reading!