Share
Explore

Snt-Write Test

CT
Cường Ngô Thế
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
https://viblo.asia/p/p1-tim-hieu-headless-browser-puppeteer-63vKjngdK2R
⁠
⁠
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:
Run test
+ 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.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.