如何在 puppeteer 中删除添加到表单中的项目

Question

我遇到了 puppeteer 的问题。 我想删除表单中添加的项目。例如，我有一个表单并添加了一些假数据（“example”）。我想删除这个“示例”，它位于什么位置都没有关系。我只想删除这个“例子”。

也就是说，puppeteer 将其添加，并将在下一步中删除。

我试过了：

// fake data
const metadatatest = {
text: 'example,
}


describe('Should be navigate through details', () => {
it('can navigate through detail', async () => {

// this adds fake data successfully

await page.waitForSelector('[data-testid="appCard"]')
await page.click('[data-testid="appCardDetails"]')
await page.waitForSelector('[data-testid="overviewSectionMetadataForm"]')
await page.click('[data-testid="overviewSectionMetadataEditButton"]')
//await page.$eval('[data-testid="metadataInput"]', el => el.value = 'example')
await page.type('[data-testid="metadataInput"]', metadatatest.text)
await page.waitForSelector('[data-testid="metadataInput"]')
await Promise.all([
  page.click('[data-testid="overviewSectionMetadataEditButton"]'),
]);

// I want to delete this

})
})

我也试过

await page.keyboard.press('Backspace')
await page.keyboard.press('Clear')
await page.keyboard.press('Delete')

但没有运气。

请帮忙！

Answer 1

所以你要问的是关于从输入字段中清除文本，我读对了吗？ Puppeteer 没有内置的方法，但我找到了一种解决方法，可以为你做到这一点。

首先，您需要在要清除的输入字段上单击 3 次。这对在该元素中输入的所有文本充当 全选 操作：

await page.click(selector, { clickCount: 3 });

现在您可以使用之前的尝试清除文本：

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

更新 1：
用于清除然后在输入字段中输入所需文本的最终代码应如下所示：

await page.click('[data-testid="metadataInput"]', { clickCount: 3 });
await page.keyboard.press('Backspace');
await page.type('[data-testid="metadataInput"]', metadatatest.text);