‘only’ and ‘describe’ annotations in Playwright

Tutorial 6 – ‘only’ and ‘describe’ annotations in Playwright​​ 

What you will Learn in this blog:

• ‘only’ annotation

• ‘describe’ annotation

• Code Snippet

‘only’ annotation

We have seen​​ ‘skip’ annotation in our previous blog.​​ 

Let us now see ‘only’ annotation. It allows us to execute a desired test and ignore rest of the tests. This annotation can be used while we are still developing our tests. We can also use ‘only’ annotation to debug​​ the failed tests.

Right now we have 2 tests

When we execute, both the tests get executed as shown below

 ​​​​ 

Let us now write test.only​​ for the second test, see below line#15

Save and run.​​ 

Notice below that only ‘working with assertions’ test gets executed

Similarly, let us remove​​ .only​​ from line#15 and instead use it for first test (line#3)

Save and run.​​ 

Notice below that only ‘working with forms’ test gets executed

This time, let us use the ‘only’ annotation for both the tests

Save and​​ execute.​​ Notice below that both the tests got executed

‘describe’ annotation

‘describe’ annotation allows us to group any number of tests into 1 test suite.

Let us remove​​ .only​​ from both the tests

Let us suppose we want to group the above 2 tests into 1 test suite.

To achieve that, first of all we will select both the tests as shown below

Next, right click and cut it (Ctrl+X)

Next, we will create a test block with​​ .describe​​ annotation, the syntax is as shown below.​​ 

Note:​​ ‘.describe’ is not an async function, so no need to use async here

We will now paste the 2 tests inside this​​ .describe​​ annotation as shown below

Make sure that there are no syntax errors.

So we have placed both the tests under a single test suite called as ‘test suite’.

Save the script and execute.

Notice below that the 2 tests got executed as part of single ‘test suite’. Hence the 2 tests are visible under the name of the suite ‘test suite’

So we can use​​ .describe​​ annotation to group multiple tests together to keep our code more clean​​ and organized.

Code Snippet

import​​ {test,expect}​​ from​​ '@playwright/test'

test.describe('test suite', ()​​ =>​​ {

   ​​ test('working with forms',​​ 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')

       ​​ //const msg =  await page.locator('.alert-error')

       ​​ //await​​ expect(msg).toContainText('Login and/or password are wrong')  ​​ 

    })

   ​​ 

   ​​ test('working with assertions',​​ 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)  

    })      ​​ 

})

So this is how we use various annotations.

Thank you for reading!