First time using Playwright and Typescript. I need to write code for one manual test, but I have problem after click first button, which after shows registration input fields and one button.
Error: locator.waitFor: Target page, context or browser has been closed
Call log:
- waiting for locator('xpath=//input[@type="password"]') to be visible
Fields and button isn't visible by automated test, but when check code, it isn't in iframe, so don't need to switch to something else. Tried to wait on password field to be visible, didn't work, tried to wait on button, also didn't work. Maybe someone previously had problem, when couldn't add value to input field or click button. Below is code for page
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
<h1 class="text-2xl font-bold mb-6 text-center">Registration Form</h1>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Username:</label>
<input class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" type="text" value="" name="username">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Email:</label>
<input class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" type="email" value="" name="email">
</div>
<div><label class="block text-sm font-medium text-gray-700">Password:</label>
<input class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" type="password" value="" name="password"></div>
<div>
<label class="block text-sm font-medium text-gray-700">Confirm Password:</label>
<input class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" type="password" value="" name="confirmPassword">
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Register</button></form></div>
</div>
Here is my automated test code
import { test, expect, chromium } from '@playwright/test';
test.describe('Password Input Field Validation', () => {
test('verify password input field validation error messages', async () => {
const browser = await chromium.launch({
executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe', // Specify path to your Chrome executable
headless: false, // Set to false to run Chrome with UI visible
slowMo: 2000, // Optional: adds a slight delay to make interactions visible
});
const page = await browser.newPage();
// Navigate to the page
await page.goto('https://page-url');
// Click on the "Go to Registration" button
await page.click('text=Go to Registration');
// Verify password input field, when have less than 8 characters
submitPasswordAndCheckErrorMessage(page, "Pass1", true);
// Verify password input field, when password is without an uppercase letter
submitPasswordAndCheckErrorMessage(page, "password1", false);
// Verify password input field, when password is without an lowercase letter
submitPasswordAndCheckErrorMessage(page, "PASSWORD1", false);
// Verify password input field, when password is without number
submitPasswordAndCheckErrorMessage(page, "Password", false);
// Verify password input field, when password has least 8 characters with 1 uppercase, 1 lowercase, and 1 number
submitPasswordAndCheckErrorMessage(page, "Password1"), true);
await browser.close();
});
});
export const submitPasswordAndCheckErrorMessage = async (page: any, password: string, isAllAvailableCharters: boolean) => {
const passwordField = page.locator('//input[@type="password"]');
console.log(`Filling password field with: ${password}`); // Log the password before filling
// Fill the password field with the provided password
await passwordField.waitFor({ state: 'visible' });
await passwordField.fill(password);
// Click the "Register" button
await page.click('text=Register');
// Verify the error message is visible
const errorMessage = await page.locator('text=Password must be at least 8 characters with 1 uppercase, 1 lowercase, and 1 number.');
if (password.length <= 8 && isAllAvailableCharters == true) {
await expect(errorMessage).not.toBeVisible();
} else {
await expect(errorMessage).toBeVisible();
}
};
You're missing await
before your async calls.
This causes the browser to close before the test finishes.
Add await
to each test call:
await submitPasswordAndCheckErrorMessage(page, "Pass1", true);
await submitPasswordAndCheckErrorMessage(page, "password1", false);
await submitPasswordAndCheckErrorMessage(page, "PASSWORD1", false);
await submitPasswordAndCheckErrorMessage(page, "Password", false);
await submitPasswordAndCheckErrorMessage(page, "Password1", true);