Нажатие с текстовым атрибутом не работает должным образом

Question

Выбор элемента input и заполнение его определенным значением происходит просто

Элемент

<input class='foo' type="test" name="userName" placeholder="Enter Your Name..." />

Код с функцией click ()

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--incognito'
    ]
  });
  const page = await browser.newPage()
  await page.goto('...')
  await page.type('input[name=userName]', 'test@test.com')
  ....
})();

Я использую input[name=userName], чтобы выбрать нужный элемент HTML.Однако, когда я пытаюсь сделать это с <span /> и атрибутом text, он не работает.

Элемент

<span text="foo" id class="bar" />

Код с щелчком () Функция

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--incognito'
    ]
  });
  const page = await browser.newPage()
  await page.goto('...')
  await page.type('input[name=userName]', 'test@test.com')
  ....
  await page.waitForNavigation({ waitUntil: load })
  await page.click('span[text=foo]'); // <-- not working
})();

Есть ли прямой способ выбрать другие элементы, кроме input, по их значениям, прикрепленным к их атрибутам?

Answer 1

load в await page.waitForNavigation({ waitUntil: load }) не было установлено в '', из-за чего <span /> не было там после нажатия кнопки для входа в систему ...

Answer 2

Не знаком с Кукольником.Но в Vanilla JavaScript вы могли бы сделать:

document.querySelector('span[text="foo"]');

После небольшой копки , похоже, что ниже вы можете сделать это в Puppeteer.

const spanText = await page.evaluate(() => document.querySelector('span[text="foo"]'));