Clicking and typing

Users normally access most website functionality through clicks, keystrokes etc. Puppeteer and Playwright allow us to replicate these events by referencing elements on the page using CSS selectors.

# Clicking

Clicking is the default way of selecting and activating elements on web pages, and will appear very often in most headless scripts.

    For the times when even the humble click fails, you can try the following alternatives:

    1. await'#login', { force: true }); to force the click even if the selected element appears not to be accessible
    2. await page.$eval('#login', elem =>; to run the click inside the webpage
    3. await page.dispatchEvent('#login', 'click'); to directly dispatch the click event on the element

    # Hovering

    A popular pattern among web pages is exposing additional information or functionality when the user hovers the mouse cursor over a specific item. Examples include, menus, previews and dialogs containing extra information on the item.

      # Focussing

      Focussing on specific UI elements allows the user to interact with them without clicks. It can also result in a proactive reaction from the webapp, such as displaying suggestions.

        # Typing

        We can simulate typing on a real keyboard using page.type():

          Single key presses can also be executed. For example, to press the Enter key:

          • Puppeteer: await'Enter');
          • Playwright: await'Enter');

          Key presses can also be sent to a specific element:

          await (await page.$('input[type="text"]')).press('Enter');

          We can also hold down and release one or more keys, possibly combining them to use keyboard shortcuts:

          await page.keyboard.down('Control');
          await page.keyboard.up('Control');

          You can run the above examples as follows:

            # Further reading

            1. The related official documentation of Puppeteer and Playwright
            2. Finding effective selectors