Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@W-17682173 Fixing E2E tests failures #2224

Merged
merged 21 commits into from
Jan 31, 2025
Merged

@W-17682173 Fixing E2E tests failures #2224

merged 21 commits into from
Jan 31, 2025

Conversation

jeremy-jung1
Copy link
Collaborator

@jeremy-jung1 jeremy-jung1 commented Jan 28, 2025

The DNT notification is covering some elements in the e2e tests. Tests were modified to make the E2E tests pass again.

Description

Types of Changes

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Documentation update
  • Breaking change (could cause existing functionality to not work as expected)
  • Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

  • Removing a public function or component or prop
  • Adding a required argument to a function
  • Changing the data type of a function parameter or return value
  • Adding a new peer dependency to package.json

Changes

  • (change1) Added dnt.spec.js to both desktop and mobile
  • (change2) Modified existing test suites to answer the consent tracking form

How to Test-Drive This PR

  • (step1) Pull this branch locally
  • (step2) Open terminal. Navigate to the pwa-kit repo.
  • (step3) Open terminal. Do npm run test:e2e. This runs the E2E test suite against the deployed E2E scaffold site.
  • (step4) Do node e2e/scripts/generate-project.js --project-key retail-app-ext
  • (step5) cd ../generated-projects/retail-app-ext and npm start
  • (step6) In a separate terminal, go to the pwa-kit repo.
  • (step7) export RETAIL_APP_HOME=http://localhost:3000
  • (step8) Run npm run test:e2e and see that tests pass for mobile chromium and chromium (desktop)

Checklists

General

  • Changes are covered by test cases
  • CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

  • There are no changes to UI

or...

Localization

  • Changes include a UI text update in the Retail React App (which requires translation)

@jeremy-jung1 jeremy-jung1 requested a review from a team as a code owner January 28, 2025 08:52
@jeremy-jung1 jeremy-jung1 changed the title @W-17682173 Fixing E2E test failures @W-17682173 Fixing E2E tests Jan 28, 2025
@jeremy-jung1 jeremy-jung1 changed the title @W-17682173 Fixing E2E tests @W-17682173 Fixing E2E tests failures Jan 28, 2025

const REGISTERED_USER_CREDENTIALS = generateUserCredentials();

const checkDntCookie = async (page, expectedValue) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding more test cases to assert DNT flows. 🥳

@shethj
Copy link
Collaborator

shethj commented Jan 28, 2025

@jeremy-jung1 Looks like you're missing handling the DNT banner in the wishlist test for mobile and desktop.

The flow in that test is:

  • Try logging in using credentials
  • If login fails create an account > Loads /registration page.

Here when the login page loaded initially, DNT banner is already up and the login fails.
When it clicks on the registration link. It is looking for "Let's Get Started" text on screen which is the title of the sign up form.
But here the DNT banner is already up and it blocking that text and the test gets stuck.
You will need to handle the DNT banner as the first step when login page loads.

@@ -161,9 +184,10 @@ export const registerShopper = async ({page, userCredentials, isMobile = false})
.locator("input#password")
.fill(userCredentials.password);

const tokenResponsePromise=page.waitForResponse('**/shopper/auth/v1/organizations/**/oauth2/token')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a best practice, it is always better to await the network call and assert on the network response rather than waiting for pageLoadState(). If an assert after the await for pageLoadState times out, the lock for pageloadstate will be released while the previous network call is still in progress. This will lead to race conditions where if the network call takes longer than the await timeout, the test flow will incorrectly assume the network called failed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want this in a comment somewhere so we don't forget to do this in future tests?

@@ -153,7 +153,7 @@ test("Registered shopper can add item to wishlist", async ({ page }) => {
if(!isLoggedIn) {
await registerShopper({
page,
userCredentials: REGISTERED_USER_CREDENTIALS,
userCredentials: generateUserCredentials(),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While each individual test runs in isolation from the other tests, we must be mindful that the tests are running against a real deployed instance and the global variables in the test file like REGISTERED_USER_CREDENTIALS will not reset for each test.

When REGISTERED_USER_CREDENTIALS is reused for sign up in multiple tests, all tests after the first one will fail since the user with REGISTERED_USER_CREDENTIALS will already exist on the instance. Hence if you have signup flows in multiple tests, you must always call generateUserCredentials() to avoid conflicting usernames.

Copy link
Collaborator

@alexvuong alexvuong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally and aganinst E2E instance. Tests are all passsed. Thanks for fixing them. 👍

@vcua-mobify
Copy link
Contributor

Thanks for cleaning up the tests @jeremy-jung1 and @shethj

Tests are passing on my machine
Screenshot 2025-01-30 at 4 57 50 PM

@jeremy-jung1 jeremy-jung1 merged commit ecf7901 into develop Jan 31, 2025
39 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants