web-dev-qa-db-fra.com

Attendez que le texte apparaisse lors de l'utilisation de Puppeteer

Je me demande s'il existe une manière similaire à celle de Selenium d'attendre que le texte apparaisse pour un élément particulier. J'ai essayé quelque chose comme ça, mais cela ne semble pas attendre:

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

Vous pouvez utiliser waitForFunction. Voir https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforfunctionpagefunction-options-args

Y compris la solution de @ elena pour l'exhaustivité de la réponse:

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

Outre la méthode présentée dans la réponse de nilobarp, il existe deux autres façons de procéder:

page.waitForSelector

Utilisation du pseudo-sélecteur :empty il est possible de trouver des éléments qui ne contiennent ni nœuds enfants ni texte. En combinant cela avec le :not sélecteur, nous pouvons utiliser page.waitForSelector pour rechercher un sélecteur qui n'est pas vide:

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

Expression XPath

Si vous souhaitez non seulement vous assurer que l'élément n'est pas vide, mais également vérifier le texte qu'il contient, vous pouvez utiliser une expression XPath à l'aide de page.waitForX :

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

Cette ligne ne sera résolue qu'après la présence d'un élément sur la page ayant l'attribut class="count" et contient le texte Expected text.

3
Thomas Dondorf

page.waitFor ()

Vous pouvez également simplement utiliser page.waitFor() pour passer une fonction ou Sélecteur CSS à attendre.

Attendre la fonction

Si l'élément est un champ input , nous pouvons vérifier que l'élément .count Existe avant de vérifier qu'un value est présent pour éviter les erreurs potentielles:

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

Si l'élément n'est pas un champ input , nous pouvons vérifier que le .count L'élément existe avant de vérifier que innerText est présent pour éviter les erreurs potentielles:

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

Attendre le sélecteur CSS

Si l'élément est un champ input qui contient un placeholder , et que vous souhaitez vérifier si un value existe actuellement, vous pouvez utiliser :not(:placeholder-shown):

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

Si l'élément est un champ input qui ne contient pas placeholder , et vous voulez vérifier si l'attribut value contient une chaîne, vous pouvez utiliser :not([value=""]):

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

Si l'élément est pas un champ input qui n'a pas de nœuds d'élément enfant, nous pouvons utiliser :not(:empty) pour attendre que l'élément contienne du texte:

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

page.waitForXPath ()

Attendez XPath

Sinon, vous pouvez utiliser page.waitForXPath() pour attendre une expression XPath pour localiser les éléments sur la page.

Les expressions XPath suivantes fonctionneront même s'il existe des classes supplémentaires présentes sur l'élément autres que count. En d'autres termes, cela fonctionnera comme .count, Plutôt que [class="count"].

Si l'élément est un champ input , vous pouvez utiliser l'expression suivante pour attendre que l'attribut value contienne une chaîne:

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

Si l'élément n'est pas un champ input , vous pouvez utiliser l'expression suivante pour attendre l'élément pour contenir du texte:

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

La meilleure solution que vous pouvez faire en utilisant waitForFunction() (évitez la fonction bizarre comme chaîne):

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

Dépend du type de texte, remplacez value par innerText.

Vérifier API marionnettiste

0
Gilles Quenot