Как нажать кнопку на веб-сайте, используя Puppeteer без какого-либо класса, идентификатора ... назначенного ему?

Question

Итак, я хочу нажать на кнопку на веб-сайте.У кнопки нет идентификатора, класса, ... Так что я должен найти способ нажать на кнопку с названием, которое на ней.В этом примере я должен щелкнуть по названию "Supreme® / The North Face® Leather Shoulder Bag"

Это мой код в Node.js

const puppeteer = require('puppeteer');

let scrape = async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://www.supremenewyork.com/shop/all/bags');
await page.click(...);
browser.close();
return result;
};

Это элемент, который яхочу нажать:

<a class="name-link" href="/shop/bags/a9cz4te2r/rsth86fbl">Supreme®/The 
North Face® Leather Shoulder Bag</a>

Answer 1

Вот способ собрать эти данные.Сначала попробуйте их в консоли браузера.

[...document.querySelectorAll('a.name-link')]
.filter(element => 
  element.innerText.includes('Supreme®/The North Face® Leather Shoulder Bag')
)

Что здесь происходит?

• document.querySelectorAll находит все элементы с этим селектором.
• .filter вернет результат, соответствующий запросу.
• .includes вернет данные, содержащие данную строку.

Если a.name-link делаетне работает, тогда ищите a, если это не работает, то найдите родительский элемент и используйте его.

Как только вы получили элемент в своем браузере, вы можете применить его к своему коду, щелкнуть его и т. Д.

Использование:

Вы можете использовать page.evaluate для фильтрации инажмите.

const query = "Supreme®/The North Face® Leather Shoulder Bag";

page.evaluate(query => {
  const elements = [...document.querySelectorAll('a.name-link')];

  // Either use .find or .filter, comment one of these
  // find element with find
  const targetElement = elements.find(e => e.innerText.includes(query));

  // OR, find element with filter
  // const targetElement = elements.filter(e => e.innerText.includes(query))[0];

  // make sure the element exists, and only then click it
  targetElement && targetElement.click();
}, query)

Answer 2

Следующая функция будет щелкать по первому элементу, который соответствует определенному тексту:

const clickText = text => {
    return page.evaluate(text => [...document.querySelectorAll('*')].find(e => e.textContent.trim() === text).click(), text);
};

Вы можете использовать функцию в вашем скрипте Puppeteer, используя следующий метод:

await clickText('Supreme®/The North Face® Leather Shoulder Bag');

Answer 3

Если я правильно понял, следующий фрагмент кода должен позволить вам перейти по этой ссылке:

const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://www.supremenewyork.com/shop/all/bags');
await page.click("a[href$='a05ivugj2']");
await browser.close();
})();