Как выбрать имя изображения, которое определено в CSS Puppeteer / Node.js?

Question

Как выбрать имя изображения, которое определено в CSS?

Я могу выбрать этот класс изображений CSS с помощью JavaScript, но как я могу получить имя изображения внутри этого класса? Я хочу сделать это в Puppeteer / Node.js.

Я хочу нажать на этот класс, указанный ниже, если изображение внутри класса, указанное ниже, соответствует paper.gif.

КЛАСС:

.height-20 span a {
   background-image: url("paper.gif");
   background-color: #cccccc;
}

Селектор:

let elements = document.querySelectorAll('.height-20 span a'); // Select all Products but how to get image inside this selector?

CLICKER:

 await page.click(".height-20 span a");

То, чего я хочу достичь, дано ниже:

if(css image == paper.gif) {
await page.click(".height-20 span a");
}

Answer 1

@ Грант Миллер прав, +1. Я просто хотел предоставить простой getStyleFromElement в TypeScript :

export async function getStyleFromElement(page: Page, elementHandle: ElementHandle, cssProperty: string): Promise<string> {
  // page.evaluate evaluates the given function from inside the browser context
  // so elementHandle and cssProperty are not available in the scope of the function.
  // That is why we pass it. Puppeteer automatically converts the elementHandle
  // into the correct DOM element, though

  return page.evaluate((element, property) =>
    window.getComputedStyle(element).getPropertyValue(property), elementHandle, cssProperty);
}

Теперь вы можете получить background-image, позвонив по номеру:

getStyleFromElement (page, element, "background-image");

И бонус, если вы хотите извлечь URL из конструкции url(...):

export function getUrlFromBackgroundImage(backgroundImage: string): string | null {
  if (!backgroundImage) return null;
  const match = backgroundImage.match(/url\("(.*)"\)/);
  if (match) {
    return match[1];
  }
  return null;
}

Answer 2

Вы можете преобразовать NodeList, полученный из document.querySelectorAll(), в массив узлов, а затем отфильтровать этот массив по элементам, которые содержат background-image, что равно 'paper.gif':

const elements = [...document.querySelectorAll('.height-20 span a')].filter(e => {
  const background_image = window.getComputedStyle(e).backgroundImage.split('/').pop().replace(/[")]/g, '');
  return background_image === 'paper.gif';
});

Эту реализацию можно поместить в page.evaluate(), и вы можете click() элемент из области DOM этой страницы, если существует элемент, соответствующий заданным критериям:

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('.height-20 span a')].filter(e => {
    const background_image = window.getComputedStyle(e).backgroundImage.split('/').pop().replace(/[")]/g, '');
    return background_image === 'paper.gif';
  });

  if (elements.length) {
    elements[0].click();
  }
});