如果元素具有特定颜色，如何与木偶师或剧作家核实？

Question

我有一个具有此样式颜色的元素：#dc7709，我想检查该元素的文本是否为该颜色。我如何使用 Puppeteer 或剧作家来做到这一点？

Answer 1

您可以使用 window.getComputedStyle。请注意，它将 return 一个 rgb 值：

 assert(await page.$eval('span', e => getComputedStyle(e).color)).toBe('rgb(220, 119, 9)');

Answer 2

expect(await page.$eval('span', e => getComputedStyle(e).caretColor)).toBe('rgb(220, 119, 9)');

上面的也可以，根据需要更改rgb值。

Answer 3

如果您是 lazy-loading 样式，请先等待样式表加载：

// playwright.spec.ts

test.only('should style alert messages', async ({ page }) => {
  const alert = page.locator('.alert-primary').first();
  const initialColor = await alert.evaluate((el) => {
    return getComputedStyle(el).backgroundColor;
  });
  console.log(initialColor);

  await page.waitForResponse(
    'https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css'
  );
  const styledColor = await alert.evaluate((el) => getComputedStyle(el).backgroundColor);
  console.log(styledColor);
});

由于 initialColor 和 styledColor 可能不同：

rgba(0, 0, 0, 0)
rgb(212, 237, 218)

然后您可以 convert to hex 测试断言：

expect(rgbToHex(styledColor) === '#dc7709');

如果元素具有特定颜色，如何与木偶师或剧作家核实？

How to check with puppeteer or playwright if an element is of a specific color?

puppeteer

playwright