2

I am developing an E2E test for my app. In order to step through the whole workflow and make sure it works from beginning to the end.

Now given a form with an autocomplete element:

enter image description here

I am able to type in the form but unable to select an option. And hence advance through the form. I have tried so far:

E.g. method 1 - clicking an option

...
await page.type('input[id=ac]', 'san fran', {delay: 100})
await page.mouse.click(65, 600);
...

E.g. method 2 - automating keys

...
await page.type('input[id=ac]', 'san fran', {delay: 100})
await page.focus("#ac");
await page.type(String.fromCharCode(40)); //down arrow
await page.type(String.fromCharCode(13)); //enter
...

I only saw one Stack Overflow answer that said there may be security restrictions but I can't confirm it by looking at any official documentation.

How can I select an autocomplete option?

Full Code:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false }); 
  const page = await browser.newPage();
  await page.goto('http://localhost:8080/#/');
  ...
  await page.type('input[id=ac]', 'san fran', {delay: 100})
  await page.mouse.click(65, 600);
  ...
  
})();
Jebathon
  • 4,310
  • 14
  • 57
  • 108
  • Side question. if I'm unable to step through this form element what alternatives do I have for bypassing this form when doing my regression tests? – Jebathon Apr 06 '21 at 18:35
  • The SO answer you've found was not about _Google Places Autocomplete_, but HTML's native autocomplete. Normally what you are trying to achieve is possible. Can you share the DOM of the opened autocomplete list? There should be a list of `.pac-item` / `.pac-item-selected` etc. elements which you could click on with puppeteer. – theDavidBarton Apr 07 '21 at 06:29
  • 1
    `const addressSelector = "#formGridAddress"; await page.click(addressSelector); await page.type(addressSelector, "bos", { delay: 100 }); await page.waitForTimeout(1000); await page.keyboard.press("ArrowDown"); await page.keyboard.press("Enter");` This worked for me – Dhruvil21_04 Jul 30 '21 at 12:21

0 Answers0