name: Web Components Tests > Image URLs are resolved against an absolute base URL steps: - step: I have the environment variable "PAGEFIND_SITE" set to "public" - step: I have a "public/index.html" file with the content {html} html: |-

A page with a relative image URL.
- step: I have a "public/about/index.html" file with the content {html} html: >-
A page with an absolute image URL.
- macro: I run Pagefind - step: stdout should contain "Running Pagefind" - step: I serve the directory "public" - step: In my browser, I load "/" - step: In my browser, I click the selector "pagefind-input input" - step: In my browser, I type "image" - step: In my browser, the console should be empty - step: In my browser, I evaluate {js} js: |- let results = await toolproof.querySelector("pagefind-results ul"); await toolproof.waitFor(() => results.querySelectorAll("li a").length === 2); - snapshot: In my browser, the result of {js} js: |- let results = await toolproof.querySelector("pagefind-results ul"); let items = Array.from(results.querySelectorAll("li")); items.sort((a, b) => a.textContent.localeCompare(b.textContent)); return items.map(li => { let title = li.querySelector("a").textContent; let img = li.querySelector("img"); return title + ": " + (img ? img.getAttribute("src") : "no image"); }).join("\n"); snapshot_content: |- ╎Absolute Image: https://example.com/images/hero.png ╎Relative Image: https://example.com/blog/post/images/header.png