1

I am having issue with puppeteer. I want to delete the added item to the form. For example, I have a form and added some fake data ("example"). I want to delete this "example", it doesn't matter whatever position it located. I just only want to delete this "example".

So, it means, puppeteer adds it and will delete in the next step.

I have tried:

// 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

})
})

I have also tried using

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

but no luck.

any help please!

The Rock
  • 323
  • 1
  • 8
  • 18
  • Possible duplicate of [How to delete existing text from input using Puppeteer?](https://stackoverflow.com/questions/52631057/how-to-delete-existing-text-from-input-using-puppeteer) – Vaviloff Oct 22 '18 at 11:01

1 Answers1

3

So what you're asking is about clearing text from an input field, am I reading that correctly? Puppeteer doesn't have a built in method for that but I have found a workaround which will do it for you.

First, you need to click 3 times on the input field you wish to clear. This acts as a select all action for all text entered in that element: 

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

Now you can use your previous attempt to clear the text:

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

Update 1:
Your final code for clearing and then entering the text you want into the input field should look something like this:

await page.click('[data-testid="metadataInput"]', { clickCount: 3 });
await page.keyboard.press('Backspace');
await page.type('[data-testid="metadataInput"]', metadatatest.text);
AJC24
  • 3,280
  • 2
  • 19
  • 30
  • i got this error `- Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL` – The Rock Oct 22 '18 at 13:34
  • OK I've added an update to my original answer. Are you sure you have the code as above? If this still doesn't work - may I ask exactly what HTML you are using for that particular input field in your form? – AJC24 Oct 22 '18 at 20:38