Unable to proceed to next step after upload file when using setFilesToUpload function

[ayemelyanenko-chegg]

What is your Scenario?

Would like to upload file and move on automatically to next step after it uploads

What is the Current behavior?

File is seemingly uploaded but the automatic next step doesn't start

What is the Expected behavior?

File should be uploaded and then automatic next step should start (as seen in manual mode)

What is the public URL of the test page? (attach your complete example)

www.chegg.com

What is your TestCafe test code?

import * as path from "path";
import { Selector, t } from "testcafe";
export const emailForSignIn = Selector('input[id*="email"]');
export const passForSignin = Selector('input[type="password"]');
export const signInButton = Selector("button").withText("Sign in");
const letsGetStartedBtn = Selector("span").withText("Get started");
const upload = Selector('div[data-test="file-upload-area-upload-drop-zone"]');
const uploadOntoCanvas = Selector('input[type="file"]');
const pathToFile = path.resolve(__dirname, `./dummy.pdf`);
const nextModal = Selector('div[id="notes-upload-status-modal"]');

// user log in
async function userLogInWithCredentials(
  email: string,
  password: string
): Promise<void> {
  await t.navigateTo(
    "https://www.chegg.com/auth?redirect=https%3A%2F%2Fwww.chegg.com%2F"
  );
  await t
    .typeText(emailForSignIn, email, { paste: true })
    .typeText(passForSignin, password, { paste: true })
    .click(signInButton)
    .wait(6000);
  console.log(`Logged in as user: ${email}`);
}

fixture`Next steps after upload should work`;
test.meta({
  testID: "t-0001",
})("Next steps after upload should work", async (t) => {
  await userLogInWithCredentials("test_user_upload@chegg.us", "Password@1");
  await t.navigateTo("/pla/powernotes");
  await t.click(letsGetStartedBtn);
  await t.setFilesToUpload(uploadOntoCanvas, pathToFile);
  // upload is seemingly there but the next step where the modal should appear never happens
  await t.expect(nextModal.visible).ok();
});

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. Clone https://github.com/ayemelyanenko-chegg/nextjs-nodejs-example
2. cd into repo
3. cd into my-app
4. npm install
5. npx testcafe chrome tests/sampleUploadTest.ts -L or npx testcafe chrome tests/sampleUploadTest.ts --experimental-multiple-windows or npx testcafe chrome tests/sampleUploadTest.ts --disable-native-automation
6. File is seemingly uploaded but no next step begins in any of the three runs above

To see correct behavior manually:

1. Go to https://www.chegg.com/auth?redirect=https%3A%2F%2Fwww.chegg.com%2F
2. Sign in as test_user_upload@chegg.us/Password@1
3. Go to www.chegg.com/pla/powernotes
4. Click on Get Started button
5. Upload a docx document
6. See the modal show up with next steps

TestCafe version

3.5

Node.js version

No response

Command-line arguments

npx testcafe chrome tests/sampleUploadTest.ts -L

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

No response

[Bayheck]

Hello,

I tried reproducing the issue and indeed, it does not automatically proceed to next steps after file uploading.

However, I noticed that there is an error, after we call setFilesToUpload:

Please note that, according to documentation (https://testcafe.io/documentation/402808/recipes/basics/test-file-upload), setFilesToUpload directly changes the state of the element. So, there might be some discrepancies between manually clicking the upload and using setFilesToUpload.
Please check what could be the cause of this error, and let us know if the issue is on our side.

[ayemelyanenko-chegg]

Hello, I tried uploading other allowed formats (pptx, pdf) and it doesn't go through each time when using automation. I assume that TestCafe supports the upload of docx, pptx and pdf files.

When I opened the console log of the automated browser, I notice an error that points to hammerhead

hammerhead.js:42066

This leads me to believe that the error might be on the TestCafe side as it mentions hammerhead

I also tried to upload the file with a different automation framework as a test (which also uses an input file method) and it worked fine which further leads me to believe that the issue is on the TestCafe side

Also, looks like other users might have been seeing an issue with something similar as well but they probably couldn't provide a working example

#8162

[Bayheck]

Hello,

I tried running your usage scenario again and made sure that file uploading works as expected with

await t.setFilesToUpload(uploadOntoCanvas, "./test_pdf.pdf");
console.log(await uploadOntoCanvas.value);

https://testcafe.io/documentation/402808/recipes/basics/test-file-upload#observe-input-state

Could you please share a Minimal Working Example that we can run locally?

[ayemelyanenko-chegg]

Hello, this doesn't proceed onto the next step though. Once the file is uploaded, it should move on to the next steps of analyzing the documents and it doesn't do so in automation.

Here is a screenshot of where TestCafe stops

Here is where it should do after an upload, I listed the steps to reproduce the proper flow manually and I believe you tried it and saw it

1. Go to https://www.chegg.com/auth?redirect=https%3A%2F%2Fwww.chegg.com%2F
2. Sign in as test_user_upload@chegg.us/Password@1
3. Go to www.chegg.com/pla/powernotes
4. Click on Get Started button
5. Upload a docx or pptx or pdf file
6. See the pop up show up with next steps

Here is a video of how it will look after an upload (doing this manually):

23.04.2024_10.00.23_REC.mp4

The minimally working example is present in the steps to reproduce and in the repo that I provided. I will adjust the automation in the sample repo that I provided to assert that the next step is visible and it will fail because the next steps after the upload don't go through.

[Bayheck]

Hello,

I understand that after uploading a file, it should move on to the next steps. I managed to reproduce this behavior using your example. However, we can not determine the cause of the issue without seeing the logic behind your source code.

As I mentioned earlier, there could be differences between manually clicking the upload and using setFilesToUpload.

By "Minimal Working Example", I meant a simple page with file upload and the logic of the next automatic steps. In this minimal example, we don't have to navigate to https://www.chegg.com.

Thank you for your understanding.

[ayemelyanenko-chegg]

@Bayheck Hello, looks like this issue resolved itself for our team. We didn't even need to go to version 3.6, it was fixed with 3.5. Thanks for your help.