A Little About Me
Hi! I’m Utkarsh
, a software tester and automation enthusiast who has experience with the software known as Selenium. I still remember the first time I discovered this gem of a tool – I was absolutely in awe that there was a tool that could automate browsers, manipulate user actions, and handle testing all at once. It was like finding a secret passage in a video game!🎮
Fast forward a couple of days and I came across Playwright, and since then I’ve been trying out this tool. I’m still working my way around it, but I’ve already discovered some incredible functionalities that provide terrific support to Playwright as a browser automation tool. Today, I’ll share with you what I’ve learned so far and guide you through my journey. So grab your coffee ☕️ and let’s dive in.
Here's a glimpse of what we’ll be covering:
- Auto-Waiting for Elements ⏳
- Speed and Performance ⚡️
- Handling Modern Web Interactions 🖱️
- Headless Mode 👻
- Simplicity & Reporting (Traces, Screenshots) 📸 - Aww, this one's a keeper!
My First Playwright Test: Automating Login Form
Okay, so now let's just get down and dirty, for the first time let's touch code. My first trial with Playwright was simple: go to a site, fill out a login form, if something goes wrong, take a screenshot. You know, a classic "let's see if this stuff works" type of test.
Prerequisites:
To get things flowing before the wand-waving magic starts, here is what you must have to get started:
- Install Node.js (obviously the engine behind everything)
- Install NPM (so your project can work)
- Install any editor (but I recommend Visual Studio Code for fact)
- Basic JavaScript Knowledge (or at least the ability to Google "what is a callback?")
Setting Up the Project:
Alright, let’s not waste time. You’ve installed Node.js and NPM on your machine? Okay fine-no outdated stuff around here, my friend! Now open your editor, create a new folder (or directory), and fire up the terminal in that folder.
Next, here comes the magic: type in the command below.
npm init playwright
Just that? Really? Yes, really! It is so simple that I feel like cheating. 😎 After you run this, Playwright will ask you few things: "What language are you comfortable with? JS or TypeScript?" and "Where should the test files go?" And, voila-yay! You’re done, now you are ready to roll!
No more manual downloading dependencies, JAR files, and so on complicated things. One command and you are ready! 🎩✨
On successful setup, your project structure should look somewhat like this:
At the present moment, there's no need to keep worrying about all those file obligations; focus at the present with:
tests
folder: This is where all your test files go. Simple.
playwright.config.js
file: Now, this is where the magic happens. Seriously, the config file is like the control room of your automation spaceship. 🛸
The config file lets you do a ton of stuff, like generating reports, taking screenshots, setting auto-wait for elements, switching between browsers, and much more. But, let’s keep it simple for now, just like I learned (and still learning) 😜.
This is a really simple configuration for your config file under module.exports
. Just keep this and for now, comment out the rest of the code in the file (but please, don't touch the braces - they're sacred! Seriously, I've learned them the hard way. 😬).
module.exports = defineConfig({
testDir: './tests',
timeout: 30 * 1000,
expect:{
timeout:5000
},
reporter: 'html',
use:{
browserName: 'chromium',
screenshot: 'only-on-failure',
trace: 'retain-on-failure'
}
You can explore example files and run tests to get an idea of how things work. But now, let’s get to the fun part: writing some test cases!
Let’s Write a Test: Automating Login Form
Here’s a simple test script that goes to the login page, enters credentials, clicks the login button, and hopefully logs you in (or breaks the page and takes a screenshot – whichever comes first 😉)
const {test, expect} = require('@playwright/test');
test.only('Login Test Case',async({page})=>{
await page.goto('https://rahulshettyacademy.com/client');
await page.locator('#userEmail').fill('rajusin675@gmail.com');
await page.locator('#userPassword').fill('Abc@12345');
await page.locator('#login').click();
});
Let me explain this:
-
const { test, expect } = require('@playwright/test')
– This imports the test and expect functions, which are used to define and run your tests. -
test.only('Login Test Case', async ({ page }) => {...})
– This defines the test case. Theonly
(optional) method makes sure that this is the test that runs, and the async({page}) part tells Playwright that we're working with a browser page. -
await page.goto('https://rahulshettyacademy.com/client')
– This navigates to the login page. -
await page.locator()
- This locates the required field andfill()
method enter values into the field, just like findElement() and sendkeys() in selenium respectively. - The
click()
method does exactly what its name promises—it clicks on the element.
Pretty simple, right? Just a few lines, and your automation test is ready to go. 💥
Running the Test: Headless vs. Headed Mode
Now let’s run the test, and there are two modes you can try:
- Headless mode (no browser window shows up, it runs in the background):
npx playwright test
- Headed mode (browser window pops up, so you can watch the magic unfold):
npx playwright test --headed
And that’s it! You’ve just run your first automation test using Playwright. How cool is that? 🧑💻✨
Conclusion: Automation = Magic + Fun
It is always a thrill to write the first automation script using Selenium, Playwright, or Cypress. There is something really satisfying when it sees your browser performs all your tasks for you. And of course, brag to everyone-including relatives-about your awesome coding skills and keeping that “tech guru” aura around your gang. You know the thing.😎
So, go ahead, try it out, and feel free to share your experiences with me! Let’s continue to automate our way to a better world – one test at a time.🛠️🎉
Top comments (0)