(test) O3-3601 : E2E tests for User onboarding

[Vijaykv5]

Requirements

• This PR has a title that briefly describes the work done including a conventional commit type prefix and a Jira ticket number if applicable. See existing PR titles for inspiration.

For changes to apps

• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.

If applicable

• My work includes tests or is validated by existing tests.

Summary

This PR adds E2E test for basic user onboarding walkthroughs.

Screenshots

Related Issue

O3-3601

Other

[Vijaykv5]

Getting this error while running E2E tests and failure in getting the first step itself for getting the help menu button.
Any possible reason for it? @Piumal1999 @jayasanka-sack

[Piumal1999]

Hi @Vijaykv5 ,

I couldn't reproduce the above-mentioned error. Did that occur when you were running the tests locally?

Btw, the GitHub action is failing due to an incorrect script. To fix it, just replace the e2e/support/github/run-e2e-docker-env.sh file with the new file given here. And then add the esm-help-menu app to the list of required modules like this.

[Piumal1999]

The test fails because it starts before the page is fully loaded. The simplest way to fix this is by using the Playwright waitForLoadState function, like this:

home-page.ts file:

async goto() {
  await this.page.goto(`home`);
  await this.page.waitForLoadState('networkidle');
}

This will make it wait until there are no network connections for at least 500 ms. However, the Playwright documentation discourages using this method, as the best practice is to rely on visual components.

Another way to fix this issue is to wait for a specific component to load, such as the search button, which usually loads last. However, this method does not guarantee that all other components are fully loaded, so the error might occur again.

@jayasanka-sack WDYT?

[jayasanka-sack]

This is very helpful @Piumal1999 !

I prefer the second option; making sure all relevant elements are loaded before triggering the tutorial by adding some assertions.

[Piumal1999]

@Vijaykv5 Looks like some the selectors you used are no longer there in the UI. Can you recheck those locally and update the tests?

[Vijaykv5]

Still the same issue in second step to wait for the search icon element, but working fine locally.

[jayasanka-sack]

@Vijaykv5 could you please address these comments (it applies to all other places.)

I'd recommend keeping videos on all the time because:

• If a test fails, we know something went wrong.
• If a test passes, we can see all the steps, but we still can't be sure the tooltips are in the right place. So, having videos helps us manually confirm when needed.

[jayasanka-sack]

We can't guarantee the order of the list. The order may change when we add new tutorials. So, we need to think of a better selector.

[Vijaykv5]

@jayasanka-sack I didn't figure out how we can select those walkthoroughs.
An approach that came to my mind is having a selector in the tutorial modal #L49 and searching for the Heading and corresponding walkthrough. WDYT?

[jayasanka-sack]

First of all, I've noticed a few adjustments needed for the tutorial to follow best practices:

• Change the list to an unordered list. This will be beneficial for both testing and accessibility.
• Currently, the walkthrough button is a div. It should be a button. (A ghost button would be the option.)

Here is how your code should look (there won't be any visual changes):

<ul>
   {tutorials.map -> tutorial}
      <li>
          <h3>{title}</h3>
          <p>{description}</p>
          <Button kind="ghost">Button</Button>
      </li>
   {/tutorials}
</ul>

Once you've done that, you can select the button with this:

const tutorialTitle = "Basic ..."
await page.locator('li', { hasText: 'my item' }).locator('button').click();

[Vijaykv5]

There's a small visual change in the alignment of buttons. is this fine?

walkthrough-btn.mov

[jayasanka-sack]

That's fine. Btw, can we get the close button fixed?

[Vijaykv5]

That's fine. Btw, can we get the close button fixed?

This is due to the upgrade in carbon dependencies in this PR

This would be the fix #215, I'll talk with dennis regarding merge of that PR in todays coffee call.

[jayasanka-sack]

Suggested change

	await expect(page.locator('div').filter({ hasText: 'Welcome to OpenMRS!' }).nth(1)).toBeVisible();
	await expect(page.getByText('Welcome to OpenMRS!')).toBeVisible();

[jayasanka-sack]

Suggested change

	await expect(page.getByText('The user icon')).toBeVisible();
	await expect(page.getByText('The user icon. Click here to change your user preferences and settings.')).toBeVisible();

[jayasanka-sack]

Make sure you check for the exact full text.

[jayasanka-sack]

This applies to other places as well.