web-dev-qa-db-ja.com

Puppeteerを使用して入力から既存のテキストを削除する方法は？

現在のレコードのタイトルを含む編集可能な入力で修正テキストをテストしようとしています-そして、そのようなテキストの編集をテストして、他のテキストに置き換えたいと思います。

await page.type('#inputID', 'blah');を使用してテキストボックスに「blah」を挿入できることは知っています（私の場合、既存のテキストがあり、「blah」のみを追加します）。しかし、ページメソッドが見つかりません 1 既存のテキストを削除または置換できます。

javascriptnode.jsgoogle-chrome-devtoolspuppeteerheadless-browser
12
Javier Arias

page.evaluateを使用して、必要に応じてDOMを操作できます。

await page.evaluate( () => document.getElementById("inputID").value = "")

ただし、特定のフィールドを操作するだけでは不十分な場合があり（ターゲットページがイベントリスナーを備えたSPAになる場合があります）、実際のキー入力をエミュレートすることが望ましいです。以下の例は、このタスクに関するpuppeteerのGithubの 参考情報 からのものです。

ここでは、そのフィールドに文字がある数だけBackspaceを押します。

const inputValue = await page.$eval('#inputID', el => el.value);
for (let i = 0; i < inputValue.length; i++) {
  await page.press('Backspace');
}

別の興味深い解決策は、ターゲットフィールドを3回クリックして、ブラウザがその中のすべてのテキストを選択し、必要なものを入力できるようにすることです。

const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await input.type("Blah");
24
Vaviloff

_page.keyboard_ メソッドを使用して入力値を変更するか、 page.evaluate() を使用できます。

すべてのテキストを置換：

_// Using page.keyboard:

await page.focus( '#example' );
await page.keyboard.down( 'Control' );
await page.keyboard.press( 'A' );
await page.keyboard.up( 'Control' );
await page.keyboard.press( 'Backspace' );
await page.keyboard.type( 'foo' );

// Using page.evaluate:

await page.evaluate( () => {
    const example = document.getElementById( 'example' );
    example.value = 'foo';
});
_

テキストを追加：

_// Using page.keyboard:

await page.focus( '#example' );
await page.keyboard.press( 'End' );
await page.keyboard.type( ' bar qux' );

// Using page.evaluate:

await page.evaluate( () => {
    const example = document.getElementById( 'example' );
    example.value += ' bar qux';
});
_

Backspace Last Character：

_// Using page.keyboard:

await page.focus( '#example' );
await page.keyboard.press( 'End' );
await page.keyboard.press( 'Backspace' );

// Using page.evaluate:

await page.evaluate( () => {
    const example = document.getElementById( 'example' );
    example.value = example.value.slice( 0, -1 );
});
_

最初の文字を削除：

_// Using page.keyboard:

await page.focus( '#example' );
await page.keyboard.press( 'Home' );
await page.keyboard.press( 'Delete' );

// Using page.evaluate:

await page.evaluate( () => {
    const example = document.getElementById( 'example' );
    example.value = example.value.slice( 1 );
});
_
7
Grant Miller

キーイベントのシミュレーションに興味がない場合は、textareaの値を削除する簡潔な手段として、puppeteerの page。$ eval メソッドを使用することもできます...

await page.$eval('#inputID', el => el.value = '');
await page.type('#inputID', 'blah');

または、後続の入力をシミュレートせずに、1ステップで値を完全に置き換えます。

await page.$eval('#inputID', el => el.value = 'blah');
2
B12Toaster

上記の回答にはESLintの問題があります。 ESLint検証に合格する次のソリューション：

await page.evaluate(
  (selector) => { (document.querySelector(selector).value = ''); },
  inputBoxSelector,
);
1
Tzvika Merchav

まあ、あなたが既存のテキストを削除したい理由は、一般的にそれを置き換えたいかもしれません。

page.evaluteを使用できます

let title = getTitle()
let selector = getSelector()

await page.evaluate(
  ({selector, title}) => {
    let el = document.querySelector(selector)
    if ('value' in el) el.value = title
    else el.innerText = title
  },
  {selector, title}
)
0
levy9527