Playwright Writing Your First Playwright Test Estimated reading: 2 minutes 71 views Let’s jump into Writing Your First Playwright Test—this is where the real fun begins. Now that Playwright is set up, it’s time to explore the basics of writing meaningful and effective test scripts.Starting with the BasicsInside your tests folder, create a new test file: Finder Right-click on your project directory, select New Folder, and name it tests. Then right-click on the tests folder, choose New File, and name it login.spec.js. VS Code You can click on the New Folder and New File icons in the Explorer sidebar to quickly create the tests folder and the login.spec.js file.Run the following command in your project root if you’re using Terminal:Bashtouch tests/login.spec.jsHere’s a simple login test example:Login Screen Testconst { test, expect } = require('@playwright/test'); test('user can login with valid credentials', async ({ page }) => { // Navigate to the login page await page.goto('https://jahmalrichard.github.io/mqa-demo-test-app/pages-signin.html'); // Fill in the email/username field await page.fill('input[name="username"]', 'john@masteringqa.com'); // Fill in the password field await page.fill('input[name="pwd"]', 'securepassword'); // Click the submit button to log in await page.click('button[type="submit"]'); // Assert that the greeting "Hi, John Doe" is visible after login await expect(page.locator('#userbox .name')).toHaveText('Hi, John Doe'); });Understanding the Structure Import Playwright test functions (test and expect). Define a test named "user can login with valid credentials". Open the login page using page.goto. Fill in the username and password using page.fill. Click the login button to submit the form. Verify successful login by checking that,/b> "Hi, John Doe" is visible in the userbox.Running the TestSimply run:Bashnpx playwright test tests/login.spec.jsYou’ll see test results in the terminal. Note: Watch Your Test in ActionTo see your Playwright test run in a visible browser window, add the --headed flag when running your test. This is especially helpful for debugging or understanding how your script interacts with the page in real time.Bashnpx playwright test tests/login.spec.js --headedDebugging Tips Use await page.pause() to stop the test and explore the browser state Use npx playwright codegen to record flowsConclusionCongratulations! You’ve just written your first automated script using Playwright. This guide on Writing Your First Playwright Test sets the stage for more complex testing flows. In the next guide, Understanding Playwright Locators and Assertions, I’ll explain how Playwright finds elements and how to make your assertions rock-solid. Playwright - Previous Setting Up Playwright in Your Development Environment Next - Playwright Understanding Playwright Locators and Assertions
