кукловод получает изображение от html с атрибутом alt

Question

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 nopadding text-center"><!-- Start Product Photo --><div class="row"><img src="/products/ca/downloads/images/54631.jpg" alt="Product image 1"><br><img src="/products/ca/downloads/images/54631_WIP.jpg" alt="Product image 2"><br><p>images not to scale</p></div><!-- End Product Photo --></div>

У меня есть следующее html.

Через кукольник, как я могу получить источник изображения для изображения продукта 2 (источник из alt = value)

    product =  await page.evaluate(() => {
   let image = document.querySelector ("").src

    });

на изображении let, как я могу использовать селекторы dom для привязки к img sr c alt value = Product image 2?

Любая помощь приветствуется.

Answer 1

Вы можете использовать img[alt=desired value] в селекторе запросов. А затем с помощью переменной image вы можете извлечь переменную src с помощью image.src

Answer 2

Вы захотите использовать Селектор атрибутов . Я считаю, что точный селектор, который вы ищете, - img[alt="Product image 2"]

let image = document.querySelector('img[alt="Product image 2"]').src;
console.log(image);

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 nopadding text-center">
  <!-- Start Product Photo -->
  <div class="row"><img src="/products/ca/downloads/images/54631.jpg" alt="Product image 1"><br><img src="/products/ca/downloads/images/54631_WIP.jpg" alt="Product image 2"><br>
    <p>images not to scale</p>
  </div>
  <!-- End Product Photo -->
</div>