Unable to sign into a website while using native automation mode

[ayemelyanenko-chegg]

What is your Scenario?

Would like to be able to sign into the website using native automation

What is the Current behavior?

Unable to sign into the website when using native automation

What is the Expected behavior?

User should be able to sign into the website when using native automation

What is your public website URL? (or attach your complete example)

https://www.easybib.com/login

What is your TestCafe test code?

import {t, Selector} from 'testcafe';
const loginUrl = `https://www.easybib.com/login`;
export const emailForSignIn = Selector('input[id*="email"]');
export const passForSignin = Selector('input[type="password"]');
export const signInButton = Selector('button').withText('Sign in');
export const upgradeButton = Selector('button[aria-controls="accountMenu"]');

// user log in/log out methods
async function userLogInWithCredentials(
  email: string,
  password: string
): Promise<void> {
  await t.navigateTo(loginUrl);
  await t
    .typeText(emailForSignIn, email, { paste: true })
    .typeText(passForSignin, password, { paste: true })
    .click(signInButton)
    .wait(6000);
  console.log(`Logged in as user: ${email}`);
}

fixture`User log in`
  .meta({ fixtureID: 'f-0001', author: 'GROWTH', app: '' })
  .beforeEach(async (t) => {});

test.meta({
  testID: 't-0001',
})(
  'Sign in',
  async (t) => {
    await userLogInWithCredentials('test_email_chegg@chegg.com', 'Password1');
    await t
          .expect(upgradeButton.visible)
          .ok();
 `});

Your complete configuration file

No response

Your complete test report

No response

Screenshots

When running with native automation, test fails when trying to log in

When running without native automation, test passes when trying to log in

Steps to Reproduce

1. Clone https://github.com/ayemelyanenko-chegg/nextjs-nodejs-example
2. CD into nextjs-nodejs-example/
3. cd into my-app
4. npm install
5. Run with: npx testcafe chrome tests/sampleLoginTest.ts -e -L --native-automation and test fails because the user never actually logs in and the element visible upon logging in is not visible
6. Run with: npx testcafe chrome tests/sampleLoginTest.ts -e -L and test passes because the user actually logs in and the element is visible

TestCafe version

2.5.1-rc.1

Node.js version

18.16.0

Command-line arguments

npx testcafe chrome tests/sampleLoginTest.ts -e -L --native-automation

Browser name(s) and version(s)

Chrome 112.0.0.0

Platform(s) and version(s)

No response

Other

No response

[AlexKamaev]

Thank you for the example. I managed to reproduce the issue. We'll research it.

[nmackey]

I believe I'm running into the same issue. It doesn't look like it handles CORS requests, it never makes the preflight call.

[di5ko]

This is similar to my issue(s) as described in #7645 (comment)

[miherlosev]

Hi @ayemelyanenko-chegg,

The error message is too general. To investigate the cause of the issue, we need more information. Could you please inspect the authentication logic of the https://www.easybib.com/login and describe why the authentication request fails?

[ayemelyanenko-chegg]

@miherlosev Hello, it seems like the values entered into the email/password fields appear to be empty as per the request preview. This only happens in native automation mode, running this test without the native automation mode works properly.

Also, might these comments help out in the investigation?

#7664 (comment)

#7664 (comment)

[Aleksey28]

Hi @ayemelyanenko-chegg,

Thank you for the additional information. We'll research the issue and update this thread once we have news.

[ayemelyanenko-chegg]

Thanks for the fix @Aleksey28 @miherlosev. In order to be able to utilize it, we will need to wait for an updated TestCafe version?

[Aleksey28]

You can wait for the TestCafe release or manually set the latest testcafe-hammerhead version in overrides of package.json.