Viết code test với TestCafe

Bài viết trước:

Hướng dẫn cài đặt và tạo Test với TestCafe

Thực hiện các action trên trang

Mỗi test có thể tương tác với nội dung của page. Để thực hiện các hành động, TestCafe cung cấp 1 số actions như : click, hover, typeText, setFilesToUpload, … Chúng có thể được thực hiện lời gọi thành chuỗi.

Dưới đây là 1 đoạn code đơn giản thực hiện test bằng cách nhập 1 tên developer vào text editor và sau đó click vào nút Submit:

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button');
});

Tất cả các action test được thực hiện như 1 hàm bất đồng bộ của đối tượng test controller t. Sử dụng từ khóa await để chờ các action hoàn thành.

Quan sát, lắng nghe trạng thái của trang

TestCafe cho phép bạn quan sát trạng thái của trang (page state) bằng cách sử dụng Selector hoặc ClientFunction từ testcafe module.

Selector API cung cấp các phương thức và thuộc tính cho phép lấy các phần tử của page và thuộc tính của chúng. Client Function sử dụng để lấy các dữ liệu từ phía client như URL, user agent, …

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button');

    const articleHeader = await Selector('.result-content').find('h1');

    // Obtain the text of the article header
    let headerText = await articleHeader.innerText;
});

Như ví dụ ở trên, sau khi click nút Submit thì sẽ mở sang trang Thankyou. Selector sẽ truy cập vào các phần tử DOM trên trang được mở và kiểm tra xem kết quả trả về trên header.

Kiểm tra kết quả

1 test chức năng sẽ cần check được kết quả trả về của hành động. Sử dụng Assertion để kiểm tra kết quả hiển thị trang Thankyou lúc nãy xem ở header có hiển thị đúng hay chưa.

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
});

Mình sẽ tiếp tục đi sâu vào các thành phần, function cụ thể của TestCafe trong các bài viết sau.

Cảm ơn mọi người đã theo dõi.

Nguồn: https://testcafe.io/documentation/402635/getting-started

Anyway