Execute Playwright script on different browsers

Tutorial 3​​ ​​ Execute Test on different browsers and perform click operation

What you will Learn​​ in this​​ blog:

  • Execute playwright test in firefox browser

  • Execute playwright test in webkit browser

  • Execute playwright test from a specific folder location

  • Click an Element

  • Code​​ snippet

Execute playwright test in firefox browser

This is the test that we had executed in our last tutorial. Change the string LFETIME back to correct string LIFETIME​​ ​​ 

Save the file.

To execute the Test in firefox browser, we have to simply add the --browser flag as shown below  ​​​​ 

npx playwright test --headed​​ --browser=firefox

Execute the command from Terminal

Notice below that​​ firefox​​ version of the browser gets launched this time instead of default chromium​​ 

Execute playwright test in​​ webkit​​ browser

Execute command to run the test in webkit

npx playwright test --headed --browser=webkit

Execute playwright test from a specific folder location

We can execute a specific test by specifying the exact folder location as shown below:

npx playwright test​​ <folder/testname.spec.ts>

Click an Element

Comment the current test

We will next launch the site​​ http://zero.webappsecurity.com/index.html​​ and click the ‘Signin’ button

On clicking the ‘Signin’ button, the below page gets displayed that has another ‘Sign in’ button

Click ‘Sign in’. Notice below that we would be shown an alert message ‘Login and/or password ate wrong’

So we​​ will​​ automate this entire use case.​​ But before we do that, let us first inspect the buttons and alert message, see below​​ 


 

We will now use the css selector to identify these elements. In line#14, we are catching the alert message in a variable and than validating the same in line#15

Also, we have used the hash sign​​ #​​ in line number 12 to locate an ‘id’ using css selector.​​ 

We have used dot​​ .​​ in line number 14​​ to locate a ‘class’ using css selector.

Save the file.

Below is the entire code

Let us execute the test

Notice that the test gets executed in chromium browser

Code snippet

test('test to click an element',​​ async​​ ({​​ page​​ })​​ =>​​ {

   ​​ await​​ page.goto('http://zero.webappsecurity.com/index.html')

   ​​ await​​ page.click('#signin_button')

   ​​ await​​ page.click('text=Sign in')

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

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

})


So this is how we execute the tests in different browsers and perform the click operation.

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 - 10000 RS/149 USD
Attend All Live courses in just 10000 rs / $149 - offer ends 25th April 2024