web-dev-qa-db-ja.com

操り人形師の特定のコンテンツを持つリンクをクリックする方法は？

私のページに次のようなコンテンツがある場合：

_<a>Hi!</a>
_

Googleの操り人形師を使用して、その要素のクリックを自動化するにはどうすればよいですか？

ID、クラス、属性ではなく、コンテンツだけに基づいて選択できるようにする必要があります。

この要素を選択するために活用できる$('a:contains("Hi!")')のようなものはありますか？

https://github.com/GoogleChrome/puppeteer でこれを行うにはどうすればよいですか

ありがとう

css-selectorsbrowser-automationpuppeteer
9
Totty.js

まず、テキストで要素を見つける必要があります。

_/**
 * findElemByText - Find an Element By Text
 *
 * @param  {String} str                case-insensitive string to search
 * @param  {String} selector = '*'     selector to search
 * @param  {String} leaf = 'outerHTML' leaf of the element
 * @return {Array}                     array of elements
 */
function findElemByText({str, selector = '*', leaf = 'outerHTML'}){
  // generate regex from string
  const regex = new RegExp(str, 'gmi');

  // search the element for specific Word
  const matchOuterHTML = e => (regex.test(e[leaf]))

  // array of elements
  const elementArray = [...document.querySelectorAll(selector)];

  // return filtered element list
  return elementArray.filter(matchOuterHTML)
}

// usage
// findElemByText({str: 'Example', leaf: 'innerHTML', selector: 'title'});
// findElemByText({str: 'Example', selector: 'h1'});
// findElemByText({str: 'Example'});
_

人形スクリプトと同じフォルダに保存し、_script.js_という名前を付けます。

これで、人形劇のスクリプトでこれを使用できます。 ElementHandleを使用できますが、理解を簡単にするために、puppeteerで提供される.evaluate()関数を使用します。

_const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // expose the function
  await page.addScriptTag({path: 'script.js'});

  // Find Element by Text and Click it
  await page.evaluate(() => {
   // click the first element 
   return findElemByText({str: 'More'})[0].click();
  });

  // Wait for navigation, Take Screenshot, Do other stuff
  await page.screenshot({path: 'screenshot.png'});
  await browser.close();
})();
_

上記のコードをコピーして貼り付けないでください。理解して、自分で入力してください。上記のコードが失敗する場合は、それが失敗している理由を見つけてください。

5
Md. Abu Taher

XPathを使用した代替アプローチ

XPath 式を使用すると、はるかに簡単な方法があります。

const aElementsWithHi = await page.$x("//a[contains(., 'Hi!')]");
await aElementsWithHi[0].click();

page.$x を使用すると、このコードは、テキストHi!が内部にあるすべてのa要素を検索します。結果は、一致するa要素ハンドルを含む配列になります。 elementHandle.click 関数を使用して、要素をクリックします。

1
Thomas Dondorf