Browser not opening with Yarn PnP

[aboe026]

What is your Scenario?

I would like to run testcafe with a Yarn PnP setup.

What is the Current behavior?

I get the following error when trying to run TestCafe:

ERROR Cannot establish one or more browser connections.

What is the Expected behavior?

TestCafe correctly finds my browser and runs the test successfully.

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

https://github.com/aboe026/testcafe-yarn-browser-connection

What is your TestCafe test code?

import { Selector } from "testcafe";

fixture("Lifecycle").page("https://google.com");

test("Search bar exists", async (t) => {
  await t.expect(Selector('input[title="Search"]').exists).ok();
});

Your complete configuration file

{
  "browsers": ["chrome"],
  "screenshots": {
    "path": "screenshots",
    "takeOnFails": true
  },
  "src": "tests"
}

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

https://github.com/aboe026/testcafe-yarn-browser-connection#steps-to-reproduce

TestCafe version

2.1.0

Node.js version

v16.13.2

Command-line arguments

testcafe --config-file=.testcaferc.json

Browser name(s) and version(s)

Chrome 107.0.5304.107

Platform(s) and version(s)

Windows 11 Pro 10.0.22621.819

Other

No response

[aboe026]

I believe this might be related to #7327

[aboe026]

Note: The issue does not happen when .yarnrc.yml is configured with nodeLinker: node-modules, so seems isolated to PnP

[felis2803]

You are correct that this issue is similar to #7327. Based on the description, it appears to be the same issue.
And just like my colleague @Aleksey28 could not reproduce the problem from #7327, I could not reproduce the problem using the steps you described. TestCafe successfully launches the browser in your testcafe-yarn-browser-connection repository.
The only thing I can guess at the moment is the deprecated yarn cache, since yarn PnP relies heavily on it.
Please try resetting the yarn cache.

[aboe026]

I tested this out on another machine of mine and the issue did not happen. The difference between my 2 machines is the one where the issue occurs has the repo on a different drive than the OS (the D: drive), whereas the machine that had the repo on the same drive as the OS (C:) did not get the issue. So wondering if the problem is related to problems with non-system ("external") drives?

[aboe026]

Later today I'll attempt to both reset the yiarn cache on my original machine as well as putting the repo in the system drive to see if either of those fix the issue.

[aboe026]

Running yarn cache clean did not fix the issue. Neither did running it on my system drive (C:) on my original machine, so I think that debunks the theory that the error is due to an "external" drive

[aboe026]

I ran with more detailed logging (DEBUG=testcafe:* yarn test) on both my machines to hopefully gain an insight into what differences might be causing it to work for one and not the other. The only thing that stands out to me is that on the machine it fails for, it finds existing temporary directories and attempts to initialize them? Not sure why that would cause a problem, or maybe someone with more context can see something else going on in these logs. Also let me know if I can add more logging to any of the files, I've been trying to throw in console.logs to the relevant util/test-directory files but haven't seen a smoking gut yet.
testcafe-debug-working.txt
testcafe-debug-erroring.txt

[aboe026]

I have noticed that changing

testcafe/src/utils/temp-directory/cleanup-process/index.js

Line 59 in a927d30

await this.pendingResponses[id];

to

console.log('TEST before')
await this.pendingResponses[id];
console.log('TEST after')

I only see the TEST before printing out in the machine that does not work, while on the machine that does work it prints both TEST before and TEST after. So I think that may be the point in the code that is the culprit?

[Aleksey28]

Hi @aboe026,

Please clean the C:\Users\adamb\AppData\Local\Temp\testcafe directory manually and try again with DEBUG. If it doesn't help, share the created debug log.

[aboe026]

Unfortunately I'm still seeing the issue after removing the C:\Users\adamb\AppData\Local\Temp\testcafe directory. Logs attached:
testcafe-debug-erroring-old-temp-dirs-removed.txt

[AndreyBelym]

Thank you, we will look into it.

[Asuza]

In order to make this "work", I've done the following. It's not exactly a fix, but it does unblock me.

1. Run yarn patch testcafe
2. Note the directory that yarn extracts TestCafe to, and from that path, open up lib/utils/temp-directory/index.js.
3. Take a look at the init() method. It should look something like this:

    async init() {
        await (0, make_dir_1.default)(TempDirectory.TEMP_DIRECTORIES_ROOT);
        const tmpDirNames = await this._getTmpDirsList(this.namePrefix);
        DEBUG_LOGGER('Found temp directories:', tmpDirNames);
        const existingTmpDirFound = await this._findFreeTmpDir(tmpDirNames);
        if (!existingTmpDirFound)
            await this._createNewTmpDir();
        DEBUG_LOGGER('Temp directory path: ', this.path);
        await cleanup_process_1.default.init();
        await cleanup_process_1.default.addDirectory(this.path);
        USED_TEMP_DIRS[this.path] = this;
    }

4. Comment out or delete await cleanup_process_1.default.init(); and replace it with the following:

        console.info('This version of TestCafe has been patched by <INSERT_NAME_HERE>.')
        const fs = require("fs");
        for (const dirName of tmpDirNames) {
            const fullDirName = path_1.default.join(TempDirectory.TEMP_DIRECTORIES_ROOT, dirName);
            try {
              fs.rmdirSync(fullDirName, { recursive: true });
              console.debug(`Removed temporary directory ${fullDirName}`);
            } catch (err) {
              console.error(`Error while deleting ${fullDirName}.`, err.message);
            }
        }

Of course, customize the logs to your liking. Strictly speaking, as long as you remove the problematic line, TestCafe should work fine for you. The code I added was simply an approximation to try and do whatever it is that this part of TestCafe is supposed to do normally.

5. Run the command that yarn gave you in step 1. It should be something like yarn patch-commit -s "<path to temp dir>".
6. Finally, run yarn to apply the patch.

This patch has allowed my group to use both TestCafe 2.0.1 and TestCafe 2.1.0 without issue.

[Aleksey28]

Hi @Asuza,

Thank you for the information. We'll take it into account.

[aboe026]

I think I may have stumbled into the answer based on another bug I thought I had with jest. From @merceyz:

It's a bug in Node.js which was fixed in nodejs/node#41221 and shipped in Node.js v14.19.2, v16.14, and v17.4.

Upgrading to NodeJS 16.19.0 resolved this bug for me.

[Asuza]

I'm still having this issue with TestCafe 2.3.0 and NodeJS 18.13.0 and 18.14.0.

[aboe026]

Apologies @Asuza, thought the bug I linked would fix the issue for everyone. Re-opening because it still seems to exist on latest LTS

[miherlosev]

Duplicate of #7710