web-dev-qa-db-ja.com

Puppeteerを使用しているときにテキストが表示されるのを待ちます

Seleniumのように、特定の要素のテキストが表示されるのを待つのと同じような方法があるのでしょうか。私はこのようなものを試しましたが、待っているようには見えません：

await page.waitForSelector('.count', {visible: true});
javascriptnode.jsgoogle-chrome-devtoolspuppeteergoogle-chrome-headless
11
elena

waitForFunctionを使用できます。 https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforfunctionpagefunction-options-args を参照してください

答えを完全にするための@elenaのソリューションを含める：

await page.waitForFunction('document.querySelector(".count").inner‌​Text.length == 7');
10
nilobarp

Nilobarpからの回答で提示された方法とは別に、これを行うにはさらに2つの方法があります。

page.waitForSelector

疑似セレクター :empty を使用すると、子ノードやテキストを含まない要素を見つけることができます。これを :not セレクターと組み合わせると、 page.waitForSelector を使用して、空でないセレクターを照会できます。

await page.waitForSelector('.count:not(:empty)');

XPath式

要素が空でないことを確認するだけでなく、要素に含まれるテキストも確認する場合は、 page.waitForX を使用してXPath式を使用できます。

await page.waitForXPath("//*[@class='count' and contains(., 'Expected text')]");

この行は、ページ上にclass="count"属性を持ち、テキストExpected textを含む要素が存在する場合にのみ解決されます。

3
Thomas Dondorf

page.waitFor（）

page.waitFor() を使用して関数を渡すこともできますor待機するCSSセレクター。

関数を待つ

要素が input フィールドである場合、 value であることを確認する前に、_.count_要素が存在することを確認できます潜在的なエラーを回避するために存在します：

_await page.waitFor(() => {
  const count = document.querySelector('.count');
  return count && count.value.length;
});
_

要素がnot an input フィールドである場合、それを確認する前に_.count_要素が存在することを確認できます innerText は、潜在的なエラーを回避するために存在します。

_await page.waitFor(() => {
  const count = document.querySelector('.count');
  return count && count.innerText.length;
});
_

CSSセレクターを待機

要素が input を含む placeholder フィールドであり、 value は現在存在しています。:not(:placeholder-shown)を使用できます：

_await page.waitFor('.count:not(:placeholder-shown)');
_

要素が input であるフィールドで、notに placeholder が含まれていて、 value 属性に文字列が含まれている場合は、:not([value=""])を使用できます。

_await page.waitFor('.count:not([value=""])');
_

要素がnotである場合、子要素ノードを持たない input フィールドの場合、:not(:empty)を使用して要素を待機できます。テキストを含めるには：

_await page.waitFor('.count:not(:empty)');
_

page.waitForXPath（）

XPathを待つ

それ以外の場合は、 page.waitForXPath() を使用して、XPath式がページ上の要素を検索するのを待つことができます。

次のXPath式は、count以外の要素に追加のクラスが存在する場合でも機能します。つまり、_.count_ではなく_[class="count"]_のように機能します。

要素が input フィールドの場合、次の式を使用して value 属性に文字列が含まれるのを待つことができます。

_await page.waitForXPath('//*[contains(concat(" ", normalize-space(@class), " "), " test ") and string-length(@value) > 0]')
_

要素がnot an input フィールドの場合、次の式を使用して、要素にテキストが含まれるのを待つことができます。

_await page.waitForXPath('//*[contains(concat(" ", normalize-space(@class), " "), " count ") and string-length(text()) > 0]');
_
0
Grant Miller

waitForFunction()を使用して実行できる最善の解決策（奇妙な関数を文字列として避けてください）：

const selector = '.count';
await page.waitForFunction(
    selector => document.querySelector(selector).value.length > 0,
    {},
    selector
);

テキストのタイプに応じて、valueをinnerTextに置き換えます。

チェック puppeteer API

0
Gilles Quenot