Использование Playwright – как проверить SVG-изображение по значениям d?

Похоже, это хороший вариант использования снимка без изображения:

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

const html = `
<svg class = "SecretClass" focusable = "false" viewBox = "0 0 640 640" aria-hidden = "true" style = "width: 25px;">
 <path d = "M460 190L460 460L615 325L460 190Z"></path>
 <path d = "M90 356L90 283L487 283L487 356L90 356Z"></path>
 <path d = "M162 356L162 -68L88 -68L88 356L162 356Z"></path>
</svg>`;

test("SVG has correct content", async ({page}) => {
  await page.setContent(html);
  const svg = await page.locator(".SecretClass").innerHTML();
  expect(svg).toMatchSnapshot("svg.html");
});

При первом запуске утверждение завершится неудачей, поскольку моментальный снимок не существует. При втором заходе пройдет. Всегда проверяйте снимки, чтобы убедиться, что они отражают то, что вы от них ожидаете: запекание плохого снимка — распространенный способ получить ложноположительный результат.

Вы также можете использовать .evaluate(el => el.outerHTML()); вместо .innerHTML, если в утверждении важен сам тег SVG.

Также возможен атрибут data-testid или другой уникальный идентификатор значка. Это немного менее суетливо — снимки специфичны и не будут работать, если порядок атрибутов изменится. Для подобных утверждений также возможны скриншоты, но они могут быть подвержены другим разновидностям ложных срабатываний.

Помимо этого, хорошей идеей будет предоставить немного больше контекста для вашей структуры и варианта использования, например, родительские элементы этого SVG, поскольку использование CSS для выбора не рекомендуется. Обычно вы выбираете в зависимости от роли арии.

Если утверждение нужно подождать, вы можете обернуть его с помощью .toPass().