Как найти все кнопки с нужным текстом и кликнуть на них (puppeteer)?

Question

[Герман Коффман]

Есть код элемента:

<div>
<table id="ads-link-200982" class="work-serf">
<tbody>
<tr class="ads_200982">
<td width="18">
<div class="ybprosm" title="Просмотр видео"></div>
</td>
<td>
<div id="start-ads-200982">
<span onclick="funcjs['start_youtube'](200982, '289b14ffa65daaee8b0af37d215bbe4c', 'ads-start', 'ads');" title="https://www.youtube.com/watch?v=Tp-4bZdilLA" style="cursor:pointer;color:#006699;">стрим</span><br>
<span class="serf-text">Просмотр видеоролика</span>
</div>
<div id="ads_id_200982" style="border-left:1px solid #608ab9; margin-left:0px; padding-left:5px; border-top:1px solid #608ab9; margin-top:5px; padding-top:5px; display: none;">
<span>
№ площадки: 200982<br>
Дата размещения: <b>11.11.2021 в 23:04</b><br>
Заказ до: 18.11.2021г. 23:05
Выполнено пользователями: 5943&nbsp;&nbsp;
Таймер: <b>15</b> секунд<br>
</span>
</div>
</td>
<td align="right" width="138" nowrap="nowrap" style="text-align:right;">
<span title="Заказ до 18.11.2021г. 23:05" style="cursor: help;color:#ABB5B1;">(18.11.2021)</span>
<span title="Стоимость просмотра" style="cursor:help;color:#9d0000;">0.021<span class="ruble-symbol">o</span></span>
<div style="margin-top:5px;">
<span class="serf-text" style="font-size: 12px;vertical-align: middle;display: inline-block;">15 сек&nbsp;&nbsp;&nbsp;</span>
<span class="vip" style="vertical-align: middle;width: 18px;display: inline-block; font-size: 14px;"><b>vip</b></span>
<span class="ico ico-down" onclick="show_window('#ads_id_200982');return false;" title="Подробная информация"></span>
<span class="ico ico-report" onclick="popup_w('Жалоба на Youtube, видео №200982', false, 550, 'func=youtube&amp;dop_func=ads&amp;id=200982', 'ajax/users/abuse/pop-up-abuse.php');return false;" title="Пожаловаться на площадку"></span>
<a class="ico ico-remove" style="cursor: pointer;" title="Скрыть площадку" onclick="js_post(this, 'ajax/earnings/ajax-youtube.php', 'func=del-area&amp;id=200982&amp;type=ads&amp;hash=289b14ffa65daaee8b0af37d215bbe4c');return false;"></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>

И мне надо найти все элементы, где Таймер: = 10 секунд

И кликнуть по тексту чтобы произошла функция, а потом кликнуть еще раз по появившейся кнопке "Приступить к выполнению".

На данный момент мой код вот такой:

const puppeteer = require('puppeteer');
var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { document } = (new JSDOM('')).window;
global.document = document;

var page = [];
var pageSon = [];


async function getPic(r)
{
  const bro = await puppeteer.launch({headless: false});
  page[r] = await bro.newPage();
  //const pages = await browser.pages();

  await page[r].goto('https://aviso.bz/work-youtube');
  await page[r].waitFor(1000);
  await page[r].type("#login-form > div:nth-child(2) > input", "[e-mail]");
  await page[r].waitFor(1000);
  await page[r].type("#login-form > div:nth-child(3) > input", "password");
  await page[r].waitFor(1000);
  await page[r].click("#button-login");
  await page[r].waitFor(2500);
  await page[r].goto('https://aviso.bz/work-youtube');
  await page[r].waitForSelector("img");
  await page[r].click("#start-ads-199984 > span:nth-child(1)");
  await page[r].waitFor(2000);
  await page[r].click("#ads-lk-199984 > span.go-link-youtube");
  await page[r].waitFor(1000);
  const pages = await browser.pages();
  pageSon[r] = pages[2];
}

getPic(0);

Я знаю что вопрос сложный, но мне очень нужна помощь. Заранее всех благодарю!

Answer 1

[Алексей Сундуков]

Нужно использовать конструкции группы wait...untile. В puppeteer как я пониманию используются функции waitFor()/waitForSelector() когда аргументом передается искомый селектор (а не таймаут, как в текущем коде) https://github.com/puppeteer/puppeteer/blob/main/d...
Т.е. схема такая: клик по кнопке, ожидание пока появится элемент с текстом"Приступить к выполнению", кликнуть по этому появившимуся элементу.

Comments

[Герман Коффман]

Разницы особо не вижу. Спасибо за документацию)

[Алексей Сундуков]

Герман Коффман, разницы между waitFor(1000) и waitFor({} ())? Первый вариант просто ждет 1 секунду и идет дальше. Второй вариант (лучше waitForSelector) дожидается отработки некой логики на странице и по заданному селектору срабатывает и идет дальше, а не через срабатывание таймаута.