Tagging and Taking Screenshots in Playwright

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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024