Hướng Dẫn Làm Việc với Input Field trong Playwright

Bài viết này sẽ hướng dẫn các bạn cách làm việc với input field sử dụng Playwright. Để tối ưu hóa việc thực hành, các bạn nên xem lại bài 7 để biết cách cài đặt ứng dụng trên máy tính local trước khi bắt đầu.

Cài Đặt Môi Trường Làm Việc

Để thực hiện bài này, hãy làm theo các bước sau:

1. Mở ứng dụng local mà bạn đã thiết lập ở bài 7 bằng lệnh trong terminal:
   bash Copy

   npm start

2. Mở trình duyệt Chrome và truy cập đường dẫn: http://localhost:4200
3. Tạo một thư mục dự án mới với tên PW-test để phục vụ cho việc test với Playwright.
4. Mở Visual Studio Code và tải thư mục PW-test mà bạn vừa tạo.
5. Mở terminal trong Visual Studio Code và chạy lệnh:
   bash Copy

   npm init playwright@latest

6. Khi cài đặt xong, bạn sẽ thấy hai thư mục test. Hãy xóa thư mục tests-examples vì bạn chỉ cần dùng thư mục test.

Làm Việc với Input Fields

Truy cập vào trang http://localhost:4200 và thực hiện theo các bước sau:

1. Nhấn vào tab Forms.
2. Chọn Form Layouts và tìm đến khu vực Using the Grid.

Tạo Test Case cho Input Field

Ta sẽ sử dụng file example.spec.ts để tạo test case cho việc làm việc với input fields. Mục tiêu là truy cập vào Form Layouts, nhập thông tin vào trường email và kiểm tra giá trị đã nhập.

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

test('Input fields', async ({ page }) => {
  await page.goto('http://localhost:4200/');
  await page.getByText('Forms').click();
  await page.getByText('Form Layouts').click();
  // Sử dụng getByRole để lấy vị trí input và xóa dữ liệu đã nhập
  await page.locator('nb-card', { hasText: 'Using the Grid' }).getByRole('textbox', { name: 'Email' }).clear();
  // Nhập thông tin vào input
  await page.locator('nb-card', { hasText: 'Using the Grid' }).getByRole('textbox', { name: 'Email' }).fill('test@test.com');
  // Sử dụng locator để thao tác với input
  await page.locator('nb-card', { hasText: 'Using the Grid' }).locator('#inputEmail1').clear();
  await page.locator('nb-card', { hasText: 'Using the Grid' }).locator('#inputEmail1').fill('test@test2.com');

  // Lấy giá trị từ input
  const inputValue = await page.locator('nb-card', { hasText: 'Using the Grid' }).locator('#inputEmail1').inputValue();
  // So sánh giá trị vừa nhập với giá trị mong muốn
  expect(inputValue).toEqual('test@test2.com');
});

Lưu Ý

Ngoài cách trên, bạn còn có thể sử dụng phương thức pressSequentially để nhập từng ký tự một:

await page.locator('nb-card', { hasText: 'Using the Grid' }).locator('#inputEmail1').clear();
await page.locator('nb-card', { hasText: 'Using the Grid' }).locator('#inputEmail1').pressSequentially('test2@test.com', { delay: 500 });

Hy vọng bài viết này sẽ giúp ích cho bạn trong việc làm việc với các input field trong Playwright!
source: viblo