Playwright form field filling is inconsistent

I have a problem with testing this site. When I enter data, it can happen that, for example, from firefox, webkit, chrome, for one they do not enter, they leave empty fields, or there is a timeout or they do not enter a field from the page.

Can someone help me solve this? I have no idea what the problem is. I used xpath locators.

import { test, expect } from "@playwright/test";

test("test", async ({ page }) => {
  await page.goto(
    "https://magento.softwaretestingboard.com/vulcan-weightlifting-tank.html#review-form"
  );

  await page.locator('//*[@id="nickname_field"]').fill("Test");
  await page.locator('//*[@id="summary_field"]').fill("Summary Field");
  await page.locator('//*[@id="review_field"]').fill("Summary Field");
  await page.locator('//*[@id="Rating_3_label"]').click({ force: true });
  await page.locator('//*[@id="review-form"]/div/div/button').click();
  await expect(
    page.getByText("You submitted your review for moderation.")
  ).toBeVisible();

  await page.close();
});

I think that the main issue is in this line:

await page.locator('//*[@id="review-form"]/div/div/button').click();

Even though Playwright is a great plugin, you should always avoid long XPath expressions. I would do something like this instead:

await page.locator('button').getByText('Submit').click()

When you have "/div/div/button" that is confusing. You should always try to use shortest expression and most readable expression. Also, try clicking on the text fields before filling them with text.

Please update you code and let me know if this worked.