Получение данных от неизвестного человека с кукловодом

Question

У меня есть несколько фрагментов кода, где я получаю данные из HTML, которые не имеют очень хорошей структуры для извлечения данных, например:

элементы в списке, где они не всегда могут быть вв той же позиции ... так что мне нужно посмотреть на данные в li > span, чтобы убедиться, что я в правильном месте.

  <div id="j-profile-header-details" class="vcard font-color-white">
    <h1 class="fn n font-color-white">User Name</h1>
    <ul>
      <li><span class="font-color-meta-light">Title</span><a href="/foobar" class="url font-color-normal">User Title</a><span class="jive-orgchart-recenter font-color-meta"><a href="/foobar" class="font-color-meta-light" title="view in orgchart"><span class="jive-icon-sml jive-glyph-orgchart"></span></a>
        </span>
      </li>
      <li><span class="font-color-meta-light">Phone Number</span>+1(555) 5555555</li>
      <li><span class="font-color-meta-light">Email</span><a href="mailto:foo@bar.com" class="font-color-normal">foo@bar.com</a></li>
      <li><span class="font-color-meta-light">Manager</span>Bar, Foo</li>
    </ul>
  </div>

Я попытался несколькими разными способами без удачи, дляНапример, чтобы получить заголовок «User Title», это последние попытки:

  const headerDom = await profilePage.$(PROF_PAGE_HEADER_DETAILS_SELECTOR);
  let title = "";
  await profilePage.evaluate(() => {
    Array.from(headerDom.querySelectorAll('li')).some(li => {
      if (li.querySelector('span').textContent.trim().toLowerCase() === "title") {
        title = li.querySelector('a').textContent.trim();
        return true;
      }
      return false;
    })
  });

, который дает мне «headerDom не определен» .. если я связываю его с ... он действует как код в пределах оценкине запускается вообще (даже console.log вверху не отображается), и

  const headerDom = await profilePage.$(PROF_PAGE_HEADER_DETAILS_SELECTOR);
  let title = "";
  (await headerDom.$$("li")).some(async li => {
    if ((await li.$eval('span', ele => ele.textContent)).trim().toLowerCase() === "title") {
      title = (await li.$eval('a.url', ele => ele.textContent)).trim();
      return true;
    }
    return false;
  });

, который (кроме того, что я await / async беспорядок) дает мнеCannot read property 'trim' of undefined, если я выйду из системы li в первой строке some ... я получу объект ElementHandle.

Answer 1

Вы пытаетесь передать переменную (headerDom) из среды Node.js в контекст браузера и наоборот (title).

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

await page.evaluate(element => { ... }, elementHandle);

Это передало бы элемент (дескриптор) из вашей среды Node.js в контекст вашего браузера. Но я бы не рекомендовал делать это, лучше просто передать ваш селектор из контекста Node.js в ваш скрипт и затем выполнить все там.

Кроме того, вы не можете передать title обратно в ваш скрипт Node.js. page.evaluate только вернет возвращаемое значение в ваш скрипт. Функция запускается в другом контексте выполнения (браузер).

Объединяя все вместе, код может выглядеть так:

  const title = await profilePage.evaluate((PROF_PAGE_HEADER_DETAILS_SELECTOR) => {
    let title = "";
    const headerDom = document.querySelector(PROF_PAGE_HEADER_DETAILS_SELECTOR);
    Array.from(headerDom.querySelectorAll('li')).some(li => {
      if (li.querySelector('span').textContent.trim().toLowerCase() === "title") {
        title = li.querySelector('a').textContent.trim();
        return true;
      }
      return false;
    })
    return title;
  }, PROF_PAGE_HEADER_DETAILS_SELECTOR);