This lesson's interactive features are locked, please to keep using them

Structure Page Data

So far we've built functions to help us normalize URLs and extract links/text from HTML. Now let's structure that data in a way that's much more usable.

Assignment

Write tests for a new function called extractPageData. Here's the signature:

function extractPageData(html: string, pageURL: string): ExtractedPageData;

html is an HTML string
pageURL is the absolute URL of the page (used for converting relative URLs)
It returns an object with: url, heading, firstParagraph, outgoingLinks, imageURLs. I have created the object ExtractedPageData to return the data.

Here's one example test case to get you started:

test("extractPageData basic", () => {
  const inputURL = "https://crawler-test.com";
  const inputBody = `
    <html><body>
      <h1>Test Title</h1>
      <p>This is the first paragraph.</p>
      <a href="/link1">Link 1</a>
      <img src="/image1.jpg" alt="Image 1">
    </body></html>
  `;

  const actual = extractPageData(inputBody, inputURL);
  const expected = {
    url: "https://crawler-test.com",
    heading: "Test Title",
    first_paragraph: "This is the first paragraph.",
    outgoing_links: ["https://crawler-test.com/link1"],
    image_urls: ["https://crawler-test.com/image1.jpg"],
  };

  expect(actual).toEqual(expected);
});

Implement the extractPageData function. You have already built all the logic for this function, it just needs to return the data you're already gathering!

Run and submit the CLI tests to verify your extraction logic works correctly!