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

Question

我对木偶操作有疑问。我想删除添加到表单中的项目。例如，我有一个表单并添加了一些假数据（"example"）。我要删除这个"example"，不管它位于什么位置。我只想删除这个 "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 次。这作为对该元素中输入的所有文本的 select all 操作：

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);

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

how to delete the added item to the form in puppeteer

puppeteer