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
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.