Search code examples
reactjstypescripttestingplaywright

Playwright placing cursor at the end of an input field

I'm using playwright to write my tests. And I have a problem: I need to test the following behaviour:

  1. Apply the bold style to some text there's already in my input
  2. Check that the text I'm writing after keeps the bold styling.

To do it I need to go to the end of my input field and use the type command. How can I go to the end of my input. Here some pseudo-code:

// Before I already applied the bold. It is not relevant for the question.

const input = page.locator(`[data-testid='INPUT_FIELD']`)
await input.focus(); // Focus the input field
/* TODO: Go to the end of the input field [What should I do?] */
await input.type(' remaining part of the message');
Solution

  • You can always go to the end of the text in your input by using the keyboard.press().

    const input = page.locator(`[data-testid='INPUT_FIELD']`)
await input.focus(); // Focus the input field
await input.keyboard.press('End')
await input.type(' remaining part of the message');