Tất cả các kiểm tra trình duyệt được giới hạn ở 120 giây. Điều này có nghĩa là mọi thứ trong kịch bản của bạn cần diễn ra trong vòng 120 giây đó
Xử lý thời gian chờ
Đặt giá trị thời gian chờ chính xác có thể có nghĩa là sự khác biệt giữa giấc ngủ ngon hoặc cảnh báo làm phiền bạn do hiệu suất trang web hoặc ứng dụng của bạn giảm 500 mili giây
Bạn có thể xử lý thời gian chờ ở hai cấp độ và chúng tôi khuyên bạn nên nghiên cứu chúng theo thứ tự bên dưới
- Sử dụng các tùy chọn thời gian chờ trong Playwright/Puppeteer
- Đặt thời gian chờ toàn cầu trên bộ Mocha và cấp độ thử nghiệm
Mẹo. Sử dụng tốt
4 có thể giúp bạn đỡ phải đau đầuit['First search result is my link', async [] => { await page.type['input[name=q]', 'fluffy kittens'] await page.click['input[type="submit"]'] await page.waitForSelector['h3 a', { timeout: 5000 }] const links = await page.evaluate[[] => Array.from[document.querySelectorAll['h3 a']] .map[a => a.textContent] ] assert.equal['my link', links[0]] }].timeout[10000]
Thời gian chờ trong Playwright và Puppeteer
Trong mã Playwright/Puppeteer của bạn, bạn có nhiều tùy chọn để đặt thời gian chờ cho các hành động khác nhau. Mặc định cho hầu hết các hành động là 30 giây. Có hai cái rất quan trọng mà bạn nên sử dụng trong hầu hết mọi lần kiểm tra trình duyệt
trang. waitForSelector[]
Phương pháp này đợi một phần tử xuất hiện trên trang. Đây là bánh mì và bơ của bạn và nên được sử dụng bất cứ khi nào cần tải thứ gì đó sau khi nhấp, di chuột, điều hướng, v.v. Bạn có thể chuyển cho nó một đối tượng tùy chọn có thuộc tính thời gian chờ để ghi đè 30 giây mặc định
Các phương thức của nhà viết kịch
it['First search result is my link', async [] => {
await page.type['input[name=q]', 'fluffy kittens']
await page.click['input[type="submit"]']
await page.waitForSelector['h3 a', { timeout: 5000 }]
const links = await page.evaluate[[] =>
Array.from[document.querySelectorAll['h3 a']]
.map[a => a.textContent]
]
assert.equal['my link', links[0]]
}].timeout[10000]
5 và it['First search result is my link', async [] => {
await page.type['input[name=q]', 'fluffy kittens']
await page.click['input[type="submit"]']
await page.waitForSelector['h3 a', { timeout: 5000 }]
const links = await page.evaluate[[] =>
Array.from[document.querySelectorAll['h3 a']]
.map[a => a.textContent]
]
assert.equal['my link', links[0]]
}].timeout[10000]
6 sẽ hiển thị phần tửTrong ví dụ bên dưới, chúng tôi nhập 'mèo bông' vào trường nhập liệu trên trang tìm kiếm và nhấp vào "gửi". Sau đó, chúng tôi sử dụng phương pháp
it['First search result is my link', async [] => {
await page.type['input[name=q]', 'fluffy kittens']
await page.click['input[type="submit"]']
await page.waitForSelector['h3 a', { timeout: 5000 }]
const links = await page.evaluate[[] =>
Array.from[document.querySelectorAll['h3 a']]
.map[a => a.textContent]
]
assert.equal['my link', links[0]]
}].timeout[10000]
4 và vượt qua trong thời gian chờ 5 giây vì chúng tôi muốn kiểm tra này không thành công nếu mất nhiều thời gian hơn. Bạn cũng có thể thấy chúng tôi chỉ định thời gian chờ 10 giây cho thử nghiệm Mocha xung quanhnhà viết kịch
it['First search result is my link', async [] => {
await page.type['input[name=q]', 'fluffy kittens']
await page.click['input[type="submit"]']
await page.waitForSelector['h3 a', { timeout: 5000 }]
const links = await page.evaluate[[] =>
Array.from[document.querySelectorAll['h3 a']]
.map[a => a.textContent]
]
assert.equal['my link', links[0]]
}].timeout[10000]
nghệ sĩ múa rốiit['First search result is my link', async [] => {
await page.type['input[name=q]', 'fluffy kittens']
await page.click['input[type="submit"]']
await page.waitForSelector['h3 a', { timeout: 5000 }]
const links = await page.evaluate[[] =>
Array.from[document.querySelectorAll['h3 a']]
.map[a => a.textContent]
]
assert.equal['my link', links[0]]
}].timeout[10000]
Đọc thêm trong tài liệu hoặc API
Playwright cho phép bạn sử dụng bộ chọn XPath theo phương thức
4. Puppeteer cung cấp một phương pháp riêng cho điều đó.it['First search result is my link', async [] => { await page.type['input[name=q]', 'fluffy kittens'] await page.click['input[type="submit"]'] await page.waitForSelector['h3 a', { timeout: 5000 }] const links = await page.evaluate[[] => Array.from[document.querySelectorAll['h3 a']] .map[a => a.textContent] ] assert.equal['my link', links[0]] }].timeout[10000]
9it['First search result is my link', async [] => { await page.type['input[name=q]', 'fluffy kittens'] await page.click['input[type="submit"]'] await page.waitForSelector['h3 a', { timeout: 5000 }] const links = await page.evaluate[[] => Array.from[document.querySelectorAll['h3 a']] .map[a => a.textContent] ] assert.equal['my link', links[0]] }].timeout[10000]
trang. waitForNavigation[]
Trong cả Playwright và Puppeteer, bạn có thể nhấp vào liên kết kích hoạt điều hướng đến một trang mới. Sử dụng phương pháp
await page.click['a.some-link']
await page.waitForNavigation[] // does not works as expected
0, mặc dù nó hơi không trực quan khi sử dụng vì lời hứa liên quan phải được khởi tạo trước khi chờ nó. Điều này có nghĩa là những điều sau đây sẽ không hoạt độngnhà viết kịch
________số 8_______
nghệ sĩ múa rối________số 8_______
nhưng điều này sẽ làm việc
nhà viết kịch
const navigationPromise = page.waitForNavigation[]
await page.click['a.some-link']
await navigationPromise
nghệ sĩ múa rốiconst navigationPromise = page.waitForNavigation[]
await page.click['a.some-link']
await navigationPromise
Thời gian chờ điều hướng
Phương pháp
await page.click['a.some-link']
await page.waitForNavigation[] // does not works as expected
0 — cũng như hầu hết tất cả các phương pháp khác liên quan đến điều hướng như await page.click['a.some-link']
await page.waitForNavigation[] // does not works as expected
2 và await page.click['a.some-link']
await page.waitForNavigation[] // does not works as expected
3] — có một tập hợp các tùy chọn rất quan trọng cho thư viện biết thư viện nên coi điều gì là “điều hướng”Các tùy chọn này có hai loại
Dựa trên sự kiện DOM
Hai tùy chọn này liên quan trực tiếp đến các sự kiện mà trình duyệt của bạn phát ra khi nó đạt đến một giai đoạn tải nhất định. Những sự kiện này không dành riêng cho Puppeteer hoặc Playwright và được sử dụng trong hầu hết các trình duyệt
4 - Đây là nghiêm ngặt nhất. toàn bộ trang của bạn bao gồm tất cả các tài nguyên phụ thuộc, tôi. e. hình ảnh, tập lệnh, css, v.v. Thêm thông tinawait page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
5 - ít nghiêm ngặt hơn. khi HTML của bạn đã được tải. Thêm thông tinawait page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
Ghi chú. tùy chọn
await page.click['a.some-link']
await page.waitForNavigation[] // does not works as expected
4 là mặc định. Nó khá nghiêm ngặt, vì vậy nếu bạn có các phụ thuộc chậm thì nó có thể kém tối ưu hơndựa trên kinh nghiệm
Các tùy chọn này dựa trên kinh nghiệm rằng nếu [gần như] tất cả các kết nối mạng mà trình duyệt của bạn không còn hoạt động, trang của bạn có thể đã tải xong
- nhà viết kịch.
7 - tương đương vớiawait page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
8 trong Puppeteerawait page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
- nghệ sĩ múa rối.
8 - coi như điều hướng kết thúc khi không có nhiều hơn 0 kết nối mạng trong ít nhất 500 mili giâyawait page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
- nghệ sĩ múa rối.
0 - coi như điều hướng kết thúc khi không có nhiều hơn 2 kết nối mạng trong ít nhất 500 mili giâyawait page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
Vì vậy, mà một trong những lựa chọn?
- Có một SPA cần được kết xuất đầy đủ?
- Có trang được hiển thị phía máy chủ nhưng một số phần được tải động chậm không quan trọng. đi cho
0/await page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
7await page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
Các tùy chọn được đặt như sau
nhà viết kịch
page.waitForNavigation[{ waitUntil: 'networkidle' }]
nghệ sĩ múa rốipage.waitForNavigation[{ waitUntil: 'networkidle2' }]
Bạn cũng có thể chỉ định một mảng gồm
await page.click['a.some-link']
await page.waitForNavigation[] // does not works as expected
4 tùy chọn. Đọc thêm trong tài liệu hoặc APItrang. setDefaultNavigationTimeout[hết thời gian chờ]
Bạn có thể điều chỉnh thời gian chờ điều hướng bằng
await page.click['a.some-link']
await page.waitForNavigation[] // does not works as expected
5. Điều này ảnh hưởng đến giới hạn thời gian chờ của lần tải đầu tiên của trang hoặc ứng dụng của bạn và tất cả các điều hướng tiếp theoĐọc thêm trong tài liệu hoặc API
trang. waitFor[hết thời gian chờ] / trang. waitForTimeout [hết thời gian chờ]
Một số trang có thể phức tạp do hoạt ảnh hoặc một số hành vi phi tuyến tính hoặc nội dung động. Phương pháp này cho phép bạn “chờ đợi” trong một khoảng thời gian nhất định. Ví dụ dưới đây chuyển vào một số. Kết quả là bài kiểm tra sẽ đợi trong năm giây
nhà viết kịch
await page.waitForTimeout[5000]
nghệ sĩ múa rốiawait page.waitFor[5000]
Ghi chú. sử dụng
6 hoặcawait page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
7 nên là lựa chọn cuối cùng. Sử dụng nó một cách tiết kiệm vì nó có thể nhanh chóng phá vỡ tập lệnh của bạn nếu thời gian tải thay đổi nhiềuawait page.click['a.some-link'] await page.waitForNavigation[] // does not works as expected
Hết giờ trong Mocha
Mặc định. 2 giây
Ở mức cao nhất, bạn có thể đặt giá trị thời gian chờ trong mã Mocha của mình. Những thời gian chờ này được thực thi bất kể điều gì xảy ra trong trình duyệt Chromium do Puppeteer hoặc Playwright bắt đầu. Đối với kiểm tra Checkly, chúng tôi khuyên bạn nên sử dụng giá trị thời gian chờ cho mỗi lần kiểm tra. Trong ví dụ bên dưới, chúng tôi đã thêm một
await page.click['a.some-link']
await page.waitForNavigation[] // does not works as expected
8 vào hàm await page.click['a.some-link']
await page.waitForNavigation[] // does not works as expected
9. Thời gian chờ mặc định là 2 giây hầu như luôn quá ngắn để chạy bất kỳ kiểm tra có ý nghĩa nàonhà viết kịch
it['First search result is my link', async [] => {
await page.type['input[name=q]', 'fluffy kittens']
await page.click['input[type="submit"]']
await page.waitForSelector['h3 a', { timeout: 5000 }]
const links = await page.evaluate[[] =>
Array.from[document.querySelectorAll['h3 a']]
.map[a => a.textContent]
]
assert.equal['my link', links[0]]
}].timeout[10000]
0nghệ sĩ múa rốiit['First search result is my link', async [] => {
await page.type['input[name=q]', 'fluffy kittens']
await page.click['input[type="submit"]']
await page.waitForSelector['h3 a', { timeout: 5000 }]
const links = await page.evaluate[[] =>
Array.from[document.querySelectorAll['h3 a']]
.map[a => a.textContent]
]
assert.equal['my link', links[0]]
}].timeout[10000]
1Điều này có nghĩa là thử nghiệm này sẽ thất bại nếu nó không giải quyết trong vòng 10 giây. Bạn cũng có thể thêm thời gian chờ ở cấp bộ. Tuy nhiên, cú pháp hơi khác một chút, bởi vì bạn không thể sử dụng hàm mũi tên nếu bạn định gọi
const navigationPromise = page.waitForNavigation[]
await page.click['a.some-link']
await navigationPromise
0