Mục đích: giúp dễ hiễu hơn về các bước thực hiện và viết các file test
Bước 1:
let browserlet pagelet viewport
const puppeteer = require('puppeteer') //khai báo thư viện dùng để chụp ảnh
const token = process.env.TEST_TOKEN
beforeAll(async () => {
try {browser = await puppeteer.launch({headless: true, //optional: defines whether or not the task is allowed in foreground. Default is falseslowMo: 0, //đặt thời gian trì hoãn của dòng lệnh được thực hiệnignoreDefaultArgs: ['--no-sandbox'],})
page = await browser.newPage()
viewport = await page.setViewport({ width: 1853 , height: 951 }) // hiển thị màn hình khi truy cập
await page.goto('http://localhost:5000') //truy cập vào port 5000
await page.evaluate((token) => {localStorage.setItem('access_token', token) //truy cập vào trang bằng token}, token)} catch (error) {console.log(error)}})
describe('Home page', () => { test('go to tasks', async () => {await page.goto('http://localhost:5000/home') //sau khi truy cập thành công bằng token thì được chuyển đến trang homeawait page.waitForResponse((response) => response.url().includes('/taskBoards') && response.status() === 200) //trả về status 200 sau khi truy cập thành côngawait page.waitForSelector('.board') //chờ class này xuất hiện trên màn hìnhawait page.waitForSelector('.statuses') //chờ class này xuất hiện trên màn hình})Bước 2:
//Add tasktest('create task', async () => {await page.waitForSelector('div.testing-in-task .add-task') //chờ class này xuất hiện trên màn hình
await page.click('div.testing-in-task .add-task') //thực hiện click được gọiawait page.waitFor(5000) //cho thời gian đợi không quá 5sawait page.waitForSelector('.task-add') //chờ class này xuất hiện trên màn hình
const addTaskImage = await page.screenshot() //chụp ảnh màn hìnhexpect(addTaskImage).toMatchImageSnapshot() //kiểm tra xem đã chụp ảnh màn hình hay chưa
await page.keyboard.type('task created in task status') //thực hiện nhập kí tự await page.click('.save-add') //thực hiện click được gọiawait page.waitForSelector('.testing-in-task .task-name') ///chờ class này xuất hiện trên màn hình
const image = await page.screenshot() //chụp ảnh màn hìnhexpect(image).toMatchImageSnapshot() //kiểm tra xem đã chụp ảnh màn hình hay chưa})
test('open task detail', async () => {await page.click('.testing-in-task .task-name')await page.waitForSelector('.detail-modal')
const taskDetail = await page.screenshot()expect(taskDetail).toMatchImageSnapshot()})
test('change priority', async () => {await page.click('.priority-detail > .style-height')await page.waitForSelector('.priority-high')await page.click('.priority-high')
const changePriority = await page.screenshot()expect(changePriority).toMatchImageSnapshot()})
test('change task title', async () => {await page.$eval('.input-title', (e) => e.value = '')await page.type('.input-title', 'change title')await page.$eval('.input-description', (e) => e.value = '')await page.type('.input-description', 'change description')
const changeTitleDescription = await page.screenshot()expect(changeTitleDescription).toMatchImageSnapshot()})
test('remove assigned user', async () => {await page.waitForSelector('.status-modal > div .choose-assign-user')await page.click('.status-modal > div .choose-assign-user')
await page.waitForSelector('.user-accept')
const removeUser = await page.screenshot()expect(removeUser).toMatchImageSnapshot()
await page.click('.user-accept')await page.click('.status-modal > div .choose-assign-user')
const removeUserSuccess = await page.screenshot()expect(removeUserSuccess).toMatchImageSnapshot()})afterAll(() => {browser.close()})Bước 3:
+ chạy run local (npm start)
+ mở thêm 1 terminal
+ chạy test trên terminal bằng lệnh: npm run test -- -u
+ lúc chạy test thì tab terminal vẫn đang run local
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.