How to Create Your First Playwright Test Case Step-by-Step | Day 2 | Playwright with JavaScript in 30 Days Challenge | Tech Bharat
✅ Creating a Playwright Test Case
There are two ways to create Playwright test cases:
Using the Codegen plugin (record and playback tool)
Writing your own scripts manually
📁 File Naming Convention
Test files should use the following format:
filename.spec.js
📦 Import Required Modules
To use Playwright, we need to import modules using the require() function (from Node.js).
- @playwright/test is the main module. In this module, there are many packages. From these packages, we need only two packages
- From this module, we use:
- test → to define and run test cases
- expect → to perform validations
- We need to put these {test, accept) into a variable of let, const, or var.
const {test, expect}=require('@playwright/test');
🧪 Writing a Test Case
To write a test, we use a test block: For this, we need an anonymous function that will accept two parameters
- Parameter 1: Test title (description)
- Parameter 2: Anonymous function
An anonymous function will need playwright fixtures. pages will be displayed/represented as fixtures in Playwright, so we will use “page” as a fixture. “Page” fixture should be in curly braces. Page fixture we need to pass as an argument to an anonymous function.
Fixture: Fixture are the global variables which apply across the proiject
🎯 Page Fixture
- page is a built-in Playwright fixture.
- It represents a browser page.
- It provides methods to interact with web elements.
- Fixture contains multiple functions through which we can automate the webpages. By this page fixture, we have to access all the commands, methods, and all
test("verify the title of the demoblaze",({page})=>{
page.goto("https://demoblaze.com/");
})
🌐 Opening a URL
- page.goto() is used to open a website.
await page.goto("https://demoblaze.com/");
⚡ Async and Await
- JavaScript is asynchronous, meaning operations don’t always execute line by line.
- Whenever you are referring to the page fixture, we have to mention it as async, before the curly braces start.
test("verify the title of the demoblaze",async({page})=>{
}
)
- Whenever you are accessing any method from a page fixture, we need to mention the “await” keyword.
- JavaScript is asynchronous language. Means execution will not go line by line. Execution will be done in parallel. No steps will be depends on other steps. For this, we will use a promise. Asynce keyword it makes the function return a promise, and the await keyword makes the function wait for the promise.
- To handle this properly:
Use async before the function
Use await before Playwright methods
✔ async → makes the function return a Promise
✔ await → waits for the Promise to resolve
🏷️ Capturing and Validating Data
- page.title() → gets the page title
- page.url() → gets the current URL
- expect() → used for assertions
Validation methods:
- toHaveTitle() → validates page title
- toHaveURL() → validates page URL
type() vs fill()
type()
Types character one by one like real user.
await locator.type("Delhi");
Use Case:
- Auto suggestion dropdown
- Search field
- Keyboard events required
fill()
Clears existing value and enters new value instantly.
await locator.fill("123456");
Use Case:
- OTP
- Forms
- Input fields
✅ Complete Example
const {test, expect}=require('@playwright/test');
test("verify the title of the demoblaze",async({page})=>{
await page.goto("https://demoblaze.com/");
// Capture title
const title=await page.title();
console.log(title);
// Validate title
await expect(page).toHaveTitle("STORE");
// Capture URL
const url=page.url();
console.log(url)
// Validate URL
await expect(page).toHaveURL("https://demoblaze.com/");
// Close the page
await page.close();
})
- Join our Telegram channel: https://t.me/thetechbharat
- Join our WhatsApp Group: https://chat.whatsapp.com/BBu2ZXxqASr7AHilRfSUzh?mode=gi_t
- Follow us for more info: www.linkedin.com/in/rajat-bhatti
- Subscribe to our YouTube channel: https://www.youtube.com/@Techbharat12
Post a Comment