web-dev-qa-db-ja.com

操り人形師のボタンを押す

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepresskey-options によると、puppeteerでキーボードボタンの押下をシミュレートできます。

ここに私がやることがあります:

// First, click the search button
await page.click('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
// Focus on the input field
await page.focus('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
// Enter some text into the input field
await page.type("Bla Bla");
// Press Enter to search -> this doesn't work!
await page.press("Enter");

ボタンを押しても何も生成されません。基本的に無視されます。

7
elena

私は最終的にそれを理解しました。同じフォーム内に、タイプがsubmitであるアンカー要素が見つかりました。それをクリックしてフォームを送信しました。

私が使用したコードは次のとおりです。

const form = await page.$('a#topbar-search');
await form.evaluate( form => form.click() );

評価の代わりに$ evalメソッドを使用することもできます。

await page.$eval( 'a#topbar-search', form => form.click() );
12
elena

おそらく別のオプションは次のとおりです。

await page.keyboard.press('Enter');

仮想キーボードAPIの活用。詳細情報 こちら

3
Roger G
await page.$eval('input[name=btnK]', el => el.click());

これにより、Googleの送信ボタンをクリックします。ページに関しては、要素またはボタンのIDを見つけて使用します。

Xpathを使用して独自の要素を作成できます。

const browser = await puppeteer.launch();
const page = await browser.newPage();
const txtObject = await page.$x('.//input[type="text"]');
await txtObject[0].type('bla bla bla');

上記のコードでは、「$ x」を使用して1つの配列内のすべての要素を取得します。これが、次のコード行のインデックスとして「0」で使用する理由です。複数のオブジェクトがある場合は、「IF」条件と1つのループを使用して正しいスペースを検索し、正しいオブジェクトを使用できます。また、いくつかの属性がある場合は、そのようなものを使用してオブジェクトを明確かつ簡単に識別する方法もあります

await page.click('input[type="submit"]'); // With type
await page.click('input[class="ng-newstyle"]'); //With class attribute

また、近い将来、メンテナンスの複雑さを軽減できます。

1