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();
    }
  };

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();
    }
  };

• typescript
• automated-tests
• playwright
• playwright-typescript

Share Improve this question Follow asked Mar 26 at 12:07 Māris LMāris L 491111 bronze badges 1

• The first step is to remove the waitFor, fill will wait. But it won't fix the fact that it's not finding the element. – hardkoded Commented Mar 26 at 12:27

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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);