CLASSFUNC BLOG
We Share Our Knowledge
"Playwright" và ca kiểm thử đầu tiên với playwright
Thanh Nguyễn
20 Th10 2020 10:24

Playwright.

Playwright là một thư viện Node.js để tự động hóa Chromium, Firefox và WebKit bằng một API duy nhất. Nó được xây dừng để tự động hóa hầu hết các tính năng trình duyệt web

Kiểm thử đầu tiên

Ở đây mình sẽ dùng playwright tự động login nhé.!

Tạo một thư mục cho project của bạn và khởi tạo một project Node mới bên trong thư mục bằng câu lệnh sau:

`mkdir playright-test && cd playright-test && npm init -y`

Sau khi thiết lập xong project,, chúng ta cần cài đặt thư viện Playwright và tạo một tệp có tên là index.js

chạy câu lệnh sau để cài đặt thư viện

`yarn add playwright`

hoặc nếu bạn dùng npm

`npm i playwright`

Tiếp theo ta tạo file index.js trong project Node mà bạn vừa tạo ở trên.

đầu tiên chúng ta cần import các engine của các trình duyệt từ playwright chẳng hạn như chromium.

`const {chromium} = require('playwright')`

Sau đó bằng cách gọi phương thức launch để tạo một đối tượng browser, context

tiếp theo đó tạo một page bằng cách sử dụng phương thức newPage

dùng goto để đi đến trang `http://localhost:3001/login/` hoặc bạn có thể dùng địa chỉ này `https://github.com/login`

và cuối cùng là screenshot để chụp ảnh màn hình

`        const browser = await chromium.launch();

        const context = await browser.newContext();

        const page = await context.newPage();

        await page.goto('http://localhost:3001/login/');
  
`

Tiếp theo sử dụng page.fill để tự động điền form elements

`  await page.fill('input[name="login"]', account.login);
  await page.fill('input[name="password"]', account.password);`

page.click để submit và screenshot chụp ảnh màn hình

`await page.click('button[type="submit"]');
await page.screenshot({path: `img/example-${chromium.name()}.png`});

// đóng trình duyệt
await browser.close();
`

đây là file index.js của mình.Ở đây mình sử dụng kiểm thử trên chromiumwebkit

`const playwright = require("playwright");

const account = {login: 'thanh****.com', password: '*****'};

(async () => {
   
    for (const browserType of ['chromium', 'webkit']) {
        const crBrowser = await playwright[browserType].launch({headless: false, slowMo: 200});
        const crContext = await crBrowser.newContext();
        const crPage = await crContext.newPage();


        // Navigate and auto-wait on the page to load after navigation
        await crPage.goto('http://localhost:3001/login/');

        await crPage.fill('input[id="email"]', account.login);
        await crPage.click('button[type="submit"]');
        await crPage.fill('input[id="password"]', account.password);
        await crPage.click('button[type="submit"]');


        await verifyIsLoggedIn(crPage);
  
        // screenshot 
        await crPage.screenshot({path: `img/example-${browserType}.png`});
        
         // close
        await crBrowser.close();

    }

})();

const verifyIsLoggedIn = async (page) => {
    try {
        await page.waitForSelector("#account")
        console.log('logined')
    } catch (e) {
        console.log(e);
        if (e instanceof playwright.errors.TimeoutError) {
            // Do something if this is a timeout.
        }
    }

}`

Đây là ảnh màn hình

example-chromium.png

example-webkit.png

Còn đây là ảnh chụp mô phỏng iphone-11

playwright còn mang lại rất nhiệu tiện ích khác mà các bạn có thể tìm hiểu ở đây:

Link tham khảo:

  1. https://playwright.dev/

  2. https://github.com/microsoft/playwright

  3. https://testguild.com/what-is-playwright/