Rayrun
โ† Back to Discord Forum

Registration data shared between projects?

Hey Everyone,

I'm trying to write a user registration test.

I'm mocking the graphql mutation with page.route and it does appear to intercept the user creation api call.

When I run the test on 3 desktop and 2 mobile browser, the test works the first time for each device type (i.e. it works on the first desktop browser and the first mobile browser) but then, It fails for each subsequent browser with under the pretext that the user has already been created.

I cannot find in the docs or the internet or my mental framework why this would be happening.

Can anybody help? has someone encounter that issue before?

Screenshot_2023-11-10_at_2.53.43_pm.png

This thread is trying to answer question "Why does the user registration test only pass on `chromium` and `mobile chrome`, but not on other browsers?"

11 replies

Registration data shared between projects?

Hi, where are you setting up this mocking of the graphql mutation? Can you share more of the relevant code?

this is the actual file

const SIGN_UP_USER_MOCK_RES = {
  status: 200,
  body: JSON.stringify({ data: { signupUser: 'User created successfully' } }),
};

test('should register successfully', async ({ page }) => {
  
  await page.route('*/**/graphql', async (route) => {
    const postData = JSON.parse(route.request().postData() || '');

    if (postData.operationName === 'signUpUser') {
      await route.fulfill(SIGN_UP_USER_MOCK_RES);
    } else {
      route.continue();
    }
  });

  await page.goto('/register');

  // make sure it got to the page
  await expect(
    page.getByRole('heading', { name: /create account/i })
  ).toBeVisible();

  // fill form
  await page
    .getByPlaceholder('Email')
    .fill(process.env.NX_TEST_USER_EMAIL as string);
  await page.getByPlaceholder('Enter mobile number').fill('0421 123 456');
  await page.getByPlaceholder('First Name').fill('test');
  await page.getByPlaceholder('Last Name').fill('user');
  await page.getByPlaceholder('Password', { exact: true }).fill('TestUser1!');
  await page.getByPlaceholder('Confirm Password').fill('TestUser1!');

  // dismiss pwa installation prompt if required before clicking create account
  const dialog = page.getByText('Install Supply+');
  if (await dialog.isVisible()) await page.locator('.h-full > .fixed').tap();

  const createAccount = page.getByRole('button', { name: 'Create account' });
  await createAccount.click();

  await expect(
    page.getByRole('heading', { name: /account created/i })
  ).toBeVisible();
});

@refactoreric

actually, I have just discover that's it's not the first browser......

the test only passes on chromium and mobile chrome , not on the other browsers...

Hi, I don't see the issue, except maybe the PWA installation prompt displays faster for Chrome/Chromium. Since isVisible() will not wait for the dialog to become visible, this may be just a timing problem.

Have you tried the trace viewer? https://playwright.dev/docs/trace-viewer-intro

ok I'm sorry, with a bit more digging with today's fresh brain, it seems to the interception is not working for browsers other the the chrome-based one as it does not get that fullfilled tag next to the xhr call on the playwright test ui....

๐Ÿค”

I don't believe I have heard or seen about such restrictions. The routing should work with other browsers too.

But is the await createAccount.click(); actually successful on the other browsers? (Or is the PWA dialog in the way?)

(sorry wnet on a long weekend)

mmm weird. yes the click works. I can see it working and then it display the "user already created" UI "error"

I'll do some digging on the internet about that support. Or maybe it's something that gets messed up when you with NX

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.