Selector Update Guide

• Understanding Selectors in Our Project

  Choice -1:
  Use Browser Devtools (Elements)

Inspect the element then match the DOM selector

Open

  Choice-2 (Recommended):

Use Existing cypress test case to locate the element

Run the Test using cy:open then  you can easily identify the selectors

Open

• Choose the Best Selector Strategy

Preferred Order for Selectors:
1️⃣ Unique IDs (Best: #login-button)
2️⃣ Data attributes ([data-test="login-button"])
3️⃣ Stable class names (.btn-login)
4️⃣ XPath (only if necessary) (//button[contains(text(), 'Login')])

• Using absolute XPath (/html/body/div[3]/button[2])

• Very generic classes (.btn, .container)

• Randomized class names

• Update the Selector in Code
  Update the test files example dashboardPage.js with new selectors
  Update the code of components associated with the test file in this case pathology dashboard,cytology etc
  Run the test again preferably with npm run cy:open                                    

Debug the errors (in some cases use can reuse the data-testid attribute) 

•  Committing & Submitting a PR
  Run the formatter cd frontend then run npm run format

Check the pr CI run npm run cy:run on a fresh instance(delete previous docker volumes) and check for any errors

If things do well add the relevant files to git and raise a pr