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:
Tạo bước truy cập vào trang cần thực hiện file test thông qua token của account có sẵn Có thể xem puppeteer và headless ở đây let browser
let page
let 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 false
slowMo: 0, //đặt thời gian trì hoãn của dòng lệnh được thực hiện
ignoreDefaultArgs: ['--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 home
await page.waitForResponse((response) => response.url().includes('/taskBoards') && response.status() === 200) //trả về status 200 sau khi truy cập thành công
await page.waitForSelector('.board') //chờ class này xuất hiện trên màn hình
await page.waitForSelector('.statuses') //chờ class này xuất hiện trên màn hình
})
Bước 2:
Tạo bước để thực hiện test (CRUD) và sau khi thực hiện xong test thì thoát //Add task
test('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ọi
await page.waitFor(5000) //cho thời gian đợi không quá 5s
await 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ình
expect(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ọi
await 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ình
expect(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