typescript - Vấn đề đồng bộ Playwright với ứng dụng Angular

Tôi đang cố gắng tự động hóa một kịch bản trong đó dịch vụ truy vấn cơ sở dữ liệu và hiển thị dữ liệu lên giao diện người dùng. Quá trình hiển thị này mất khá nhiều thời gian (khoảng 3 phút). Playwright không chờ cho đến khi trang tải xong. Tôi đã thử sử dụng

await page.waitForLoadState();,
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded'); and 
await page.setDefaultNavigationTimeout(150);

Tôi đang làm việc trên một ứng dụng Angular, tôi có rất nhiều kịch bản nơi tôi gặp phải những loại vấn đề đồng bộ này.

Câu trả lời #1

Triển khai hàm chờ tùy chỉnh

đến khi lưới/bảng/hoặc đối tượng khác được tải đầy đủ:

Cách dễ nhất có lẽ là sử dụng page.waitForFunction để đợi cho đến khi lưới/bảng được điền đủ hàng.

Ví dụ, bạn có thể chờ cho đến khi 1000 hàng được tải trong bảng với đoạn mã sau:

await page.waitForFunction(() => document.querySelectorAll('#table-selector tr').length >= 1000);

Đợi phản hồi

WaitForResponse đã hoạt động với tôi để chờ phản hồi từ dịch vụ lâu với thời gian chờ tùy chỉnh:

Thông thường, bạn phải bắt đầu chờ phản hồi trước khi hành động gây ra cuộc gọi xảy ra.

// Alternative way with a predicate.
const [response] = await Promise.all([
  // Waits for the next response matching some conditions
  page.waitForResponse(response => response.url() === 'https://example.com' && response.status() === 200 , { timeout: 300000 }),
  // Triggers the response
  page.click('button.triggers-response'),
]);

Xác minh nội dung phản hồi

Các trường hợp mà việc xác minh trạng thái phản hồi không đủ và cần phải xác minh cả nội dung phản hồi.

    const promise= page.waitForResponse(/abcd/); // Regex 
    await page.goto('https://myurl.com', {waitUntil: 'networkidle', timeout: 30000}); 
    var response = await promise; // waiting for promise
    let resp = await response.json(); 
    console.log(resp); 
    await browser.close(); 

Nguồn: https://playwright.dev/docs/api/class-page#page-wait-for-response