时间戳

首页 > 解决方案 > 如何在 puppeteer 中删除添加到表单中的项目

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

问题描述

我对 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')

但没有运气。

请有任何帮助！

标签： puppeteer

解决方案

所以你要问的是关于从输入字段中清除文本，我读对了吗？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);

推荐阅读