Xpath selector is okay. Brittle selectors are the problem

xpath-selectors.ts

test('XPath as syntax vs locator strategy', async ({ page }) => {
  await page.goto('https://example.com/app');

  // ✅ Test ID strategy - using XPath syntax
  await page.locator('//button[@data-testid="submit-order"]').click();
  
  // ✅ Test ID strategy - using CSS syntax  
  await page.locator('[data-testid="submit-order"]').click();
  
  // ✅ Accessibility strategy - using XPath syntax
  await page.locator('//button[@aria-label="Submit your order"]').click();
  
  // ✅ Accessibility strategy - using CSS syntax
  await page.locator('[aria-label="Submit your order"]').click();
  
  // ✅ User-facing strategy - XPath excels here
  await page.locator('//button[text()="Submit Order"]').click();
  
  // ❌ BRITTLE strategy - regardless of syntax
  await page.locator('//div[2]/form/div[3]/button[1]').click(); // XPath
  await page.locator('div:nth-child(2) form div:nth-child(3) button:first-child').click(); // CSS
});