Question 73804 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Playwright placing cursor at the end of an input field – Reactjs

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');
Tags:

2

Answers


  1. 0

    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');
    Login or Signup to reply.
  2. 0

    This answer is good, suggesting triggering an End press. Here’s a runnable example that uses page instead of input for accessing the .keyboard property:

    const playwright = require("playwright"); // ^1.30.0

const html = `<!DOCTYPE html><input value="hello">`;

let browser;
(async () => {
  browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  await page.setContent(html);
  const input = page.locator("input");
  await input.focus();
  await page.keyboard.press("End");
  await page.keyboard.type(" world");
  await input.screenshot({path: "test.png"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

    You can also use key left and right to move the cursor to other locations in the input.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search