Playwright JS Cheatsheet: Learn in 30 Minutes

Interested in learning Playwright with JavaScript in just 30 minutes? No problem. Are you training for interviews, looking to upgrade your QA skills or want to try a modern alternative to Selenium? All you need is this quick guide. Beginners will enjoy that I use simple language, share useful examples and leave out the unnecessary parts.

Why did I choose to help you out with Playwright?

Let’s say you’ve used Selenium. It works, but sometimes it feels slow or tricky with modern web apps. That’s where Playwright shines. It’s a fast, reliable end-to-end testing tool from Microsoft that supports multiple browsers (Chrome, Firefox, Safari) and even multiple languages (JavaScript, Python, Java, C#). For this cheatsheet, we’ll stick to JavaScript.

How to Get Started

You will first have to set up Node.js and npm.

The best IDE for Playwright is Visual Studio Code.

Install Visual Studio Code.
Create any folder — say playwrightBasics.
Open that folder in Visual Studio Code.
Open the terminal and run: npm init playwright@latest
When it prompts you, choose JavaScript and proceed.
You’ll get a message saying: Happy hacking! 🎭

That means your Playwright setup is done!

To cross-check, go to the Testing tab, and run example.spec.js (a sample test given by Playwright to check the configuration).

🔥 Let’s do our First Script (Open Google)

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

test('has title', async ({page}) => { 
await page.goto('https://www.google.com');
await expect(page).toHaveTitle(/Google/);
});

That’s it. What does this do?

We import test and expect from Playwright.
We define a test named "has title".
The browser goes to Google.

Then it checks if the page title includes the word Google.

🎯 This is like opening Google in your browser and looking at the tab title to confirm it’s right.

🧠 Basic Commands

🧩 Action 💡 Playwright Command
Launch browser const browser = await chromium.launch();
New page const page = await browser.newPage();
Open URL await page.goto('https://example.com');
Click button await page.click('#submit');
Type into input await page.fill('#username', 'myName');
Get text const text = await page.textContent('.result');
Wait for element await page.waitForSelector('#welcome');
Take screenshot await page.screenshot({ path: 'page.png' });
Close browser await browser.close();
Headless mode OFF launch({ headless: false })

👉 Pro Tip: You can run tests in headed mode (with UI) or headless (background).

Additional Useful Features

1. Record Test Code Automatically (Codegen Magic)

npx playwright codegen https://example.com

This command will Open a browser and the Playwright Inspector.
You can interact with the page — click buttons, fill forms, etc.
As you do that, Playwright writes the test code for you in real-time on the side.
🎉 It’s like having an assistant writing the script while you click around!

2. Auto-Waits

We won’t add any sleeping or timed waits to your code. The Playwright module looks for changes on its own.

3. Multiple Browser Support

Run the same test in Chrome, Firefox, or Safari. In the Testing tab, you can choose the browser — and the same script will work!

💼 Personal Tip

When I first started, I saved my 5 favourite Playwright lines on a sticky note. I ran them nightly — launch browser, open page, fill form, click, close browser. Repeating that helped me get the flow.
You'll be surprised how quickly Playwright starts feeling familiar.

🧪 Test Case

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

test('Sauce Demo test', async ({ page }) => {
  await page.goto('https://www.saucedemo.com/v1/');
  await page.locator('[data-test="username"]').click();
  await page.locator('[data-test="username"]').fill('standard_user');
  await page.locator('[data-test="password"]').click();
  await page.locator('[data-test="password"]').fill('secret_sauce');
  await page.getByRole('button', { name: 'LOGIN' }).click();
  await expect(page.locator('#header_container div').nth(1)).toBeVisible();
  await page.close();
  });

📚 More Frequently Asked Playwright Interview Questions (Based on Basics)

What is Playwright and how is it different from Selenium?
Playwright is an end-to-end automation tool built by Microsoft. Unlike Selenium, it supports multiple browsers and languages out of the box, and handles modern web features better like single-page apps and auto-waits.
How does Playwright handle waits?
Playwright uses auto-wait — it waits for elements to appear, become visible, or enabled automatically. You can also use waitForSelector() manually.
Can you explain Playwright’s record feature?
You can create code automatically for a page by running npx playwright codegen <url>.
What’s the difference between fill() and type()?
With fill(), the field is emptied out and text is placed over it. For type(), text will be added to what is already on the field.
How do you assert that text is visible?
await expect(page.locator('text=Hello')).toBeVisible();
How do you press a key, like Enter, using Playwright?
You can simulate keyboard keys like this: await page.press('input[name="q"]', 'Enter');
How do you run Playwright tests on a specific browser like Firefox?
You can specify the browser using the --project flag. For example:
npx playwright test --project=firefox

What’s the Next Step?

Once you’re confident with the basics, explore:

Running tests in parallel
Using test fixtures
Testing APIs with Playwright
Visual comparisons

🙌 Wrap-Up

Hope this Playwright cheatsheet helped you feel a bit more confident. Remember, you don’t have to master everything in one go. Start small — launch a browser, open a page, click a button. That’s more than enough to begin.

If you found this helpful, do share it with your friends or team on LinkedIn, WhatsApp, or wherever you hang out online. And hey — subscribe to the blog for more clear, no-nonsense tutorials like this!

Happy testing and chai sipping! ☕

Playwright JavaScript Cheatsheet: Learn in 30 Minutes (with Code Snippets)