ReferenceError: dokumen tidak ditakrifkan ralat Typescript dalam Playwright

Idenya ialah saya cuba mendapatkan semua tajuk HTML (h1 h2 h3 h4 h5 h6) dan menguji jika mereka berada dalam susunan mesra SEO. Jika saya cuba menjalankannya, saya mendapat ralat ReferenceError: document is not defined ralat Typescript dalam Playwright.

async assertHeadingsOrder2() {
  // eslint-disable-next-line @typescript-eslint/require-await
  await test.step('Test html header structure for catalog page', async () => {
    // Get all the heading tags (h1, h2, h3, h4, h5, h6) in the document
    const headingTags = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

    // Define a function to test the hierarchy
    function testHeadingHierarchy() {
      const hierarchy = [];

      headingTags.forEach(heading => {
        const tagName = heading.tagName.toLowerCase(); // Get the tag name (e.g., "h1", "h2")
        const level = parseInt(tagName.charAt(1), 10); // Extract the numeric level from the tag name

        // Check if the hierarchy is valid
        if (level > hierarchy.length + 1) {
          console.error(`Invalid hierarchy: ${tagName} is not in the correct order.`);
        }

        // Update the hierarchy array with the current level
        hierarchy[level - 1] = tagName;
      });

      console.log('Heading hierarchy is valid:', hierarchy.join(' > '));
    }

    // Call the function to test the hierarchy
    testHeadingHierarchy();
  });
}

Jawapan #1

Playwright tidak secara automatik menjadikan document tersedia untuk anda dalam Node. Sebaliknya, ia memberikan anda objek browser dan page dengan API yang luas untuk mengawal laman web melalui objek tersebut.

Anda boleh menggunakan page.evaluate() untuk menjalankan kod di pelayar dan mengakses document, tetapi biasanya, anda akan memilih elemen dengan API locator pada objek page.

Penyelidik CSS anda seharusnya "h1, h2, h3, h4, h5, h6" dan bukannya "h1 h2 h3 h4 h5 h6". Yang pertama menggunakan koma untuk logik "atau", manakala yang kedua memilih <h6> yang bersarang di dalam semua header lain.

Berikut adalah contohnya:

import {expect, test} from "@playwright/test"; // ^1.39.0

const failMsg = (prev, curr) =>
  `h${curr} was more than one level deeper than previous header h${prev}`;

test("detects a skipped heading", async ({page}) => {
  test.fail(); // expect this test to fail
  const html = `<!DOCTYPE html><html><body>
  <h1>1</h1>
  <h2>2</h2>
  <h4>4</h4>
  </body></html>`;
  await page.setContent(html); // replace with page.goto("<Your URL>"); when you're working with a real site
  const headers = await page
    .locator("h1, h2, h3, h4, h5, h6")
    .evaluateAll(els => els.map(el => +el.tagName.slice(1)));

  for (let i = 1; i < headers.length; i++) {
    expect(
      headers[i] - headers[i-1],
      failMsg(headers[i-1], headers[i])
    ).toBeLessThan(2);
  }
});

test("handles a valid structure", async ({page}) => {
  const html = `<!DOCTYPE html><html><body>
  <h1>1</h1>
  <h2>2</h2>
  <h3>3</h3>
  <h4>4</h4>
  <h4>4</h4>
  <h2>2</h2> <!-- it's OK to skip back, just not forward -->
  <h3>3</h3>
  </body></html>`;
  await page.setContent(html);
  const headers = await page
    .locator("h1, h2, h3, h4, h5, h6")
    .evaluateAll(els => els.map(el => +el.tagName.slice(1)));

  for (let i = 1; i < headers.length; i++) {
    expect(
      headers[i] - headers[i-1],
      failMsg(headers[i-1], headers[i])
    ).toBeLessThan(2);
  }
});

test("handles a valid structure on a real site", async ({page}) => {
  await page.goto("https://playwright.dev/docs/test-assertions");
  const headers = await page
    .locator("h1, h2, h3, h4, h5, h6")
    .evaluateAll(els => els.map(el => +el.tagName.slice(1)));

  for (let i = 1; i < headers.length; i++) {
    expect(
      headers[i] - headers[i-1],
      failMsg(headers[i-1], headers[i])
    ).toBeLessThan(2);
  }
});

Untuk ujian sebenar anda, anda mungkin akan menggunakan page.goto() daripada page.setContent, yang digunakan di sini semata-mata untuk membantu menunjukkan logik tuntutan dengan mudah.

Anda mungkin ingin menggunakan pemadanan tersuai untuk membantu meringkaskan mesej templat ralat yang panjang dan gelung yang jelas dan/atau menulis fungsi pembantu untuk mengekstrak pengepala.

Selain itu, kenyataan ini tidak menunggu secara automatik, tetapi saya menganggap header mungkin boleh diambil lebih kurang sekaligus. Jika andaian itu tidak benar, cuba poll atau toPass.