how to use NixOS's Cypress instead of npm's Cypress

_use nixpkgs cypress binary before npms broken copy.md

Should help with avoiding errors like:

No version of Cypress is installed in: /home/rkb/.cache/Cypress/6.2.1/Cypress

Please reinstall Cypress by running: cypress install

----------

Cypress executable not found at: /home/rkb/.cache/Cypress/6.2.1/Cypress/Cypress

----------

Platform: linux (NixOS - )
Cypress Version: 6.2.1

and

Cypress failed to start.

This is usually caused by a missing library or dependency.

The error below should indicate which dependency is missing.

https://on.cypress.io/required-dependencies

If you are using Docker, we provide containers with all required dependencies installed.

----------

Command failed with ENOENT: /home/rkb/.cache/Cypress/6.2.1/Cypress/Cypress --no-sandbox --smoke-test --ping=459
spawn /home/rkb/.cache/Cypress/6.2.1/Cypress/Cypress ENOENT

----------

Platform: linux (NixOS - )
Cypress Version: 6.2.1

todo

EACCES: permission denied, open '/home/rkb/.config/Cypress/cy/production/browsers/chrome-stable/interactive/CypressExtension/background.js'

apply this patch to Cypress from within the shell.nix (or get it upstreamed?) done. Super hacky, but done!

cypress-overlay.nix

# When Cypress starts, it copies some files into `~/.config/Cypress/cy/production/browsers/chrome-stable/interactive/CypressExtension/`
# from the Nix Store, one of which it attempts to modify immediately after.
# As-is, this fails because the copied file keeps the read-only flag it had in
# the Store.
# Luckily, the code responsible is a plain text script that we can easily patch:
final: prev: {
  cypress = prev.cypress.overrideAttrs (oldAttrs: {
    installPhase = let
      old = "copyExtension(pathToExtension, extensionDest)";
      # This has only been tested against Cypress 6.0.0!
      newForChrome =
        "copyExtension(pathToExtension, extensionDest).then(() => fs_1.default.chmodAsync(extensionBg, 0o0644))";
      newForFirefox =
        "copyExtension(pathToExtension, extensionDest).then(() => fs.chmodAsync(extensionBg, 0o0644))";
    in ''
      sed -i 's/${old}/${newForChrome}/' \
          ./resources/app/packages/server/lib/browsers/chrome.js

      sed -i 's/${old}/${newForFirefox}/' \
          ./resources/app/packages/server/lib/browsers/utils.js
    '' + oldAttrs.installPhase;
  });
}

shell.nix

let pkgs = import <nixpkgs> { overlays = [ (import ./cypress-overlay.nix) ]; };
in pkgs.mkShell {
  name = "cypress-example";

  buildInputs = with pkgs; [
    cypress
    (with dotnetCorePackages; combinePackages [ sdk_5_0 net_5_0 ])
    nodejs
  ];

  shellHook = ''
    export CYPRESS_INSTALL_BINARY=0
    export CYPRESS_RUN_BINARY=${pkgs.cypress}/bin/Cypress
  '';
}

I followed all these steps but when I try to run cypress it errors out with :
qemu-x86_64: Could not open '/lib64/ld-linux-x86-64.so.2': No such file or directory

For the record, I just upgraded from Cypress v10.11.0 to v12.1.0 and I had to drop entire installPhase.

So, as for cypress-overlay.nix, before:

## NOTE: This is a Nix overlay file taken and modified from:
##
## https://gist.github.com/r-k-b/2485f977b476aa3f76a47329ce7f9ad4
##
##
## When Cypress starts, it copies some files into
##
## ~/.config/Cypress/cy/production/browsers/chrome-stable/interactive/CypressExtension/
##
## ... from the Nix Store, one of which it attempts to modify immediately
## after. As-is, this fails because the copied file keeps the
## read-only flag it had in the Store.
##
## Luckily, the code responsible is a plain text script that we can
## easily patch:
final: prev: {
  cypress = prev.cypress.overrideAttrs (oldAttrs: rec {
    pname = "cypress";
    version = "10.11.0";

    src = prev.fetchzip {
      url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
      sha256 = "06mi20jknc52i62l4lq2j1r9ahd7x2bm6vznc2v1flawh1vkvziv";
      ## Note: sha256 is computed via (note the version):
      ##
      ## nix-prefetch-url --unpack https://cdn.cypress.io/desktop/10.11.0/linux-x64/cypress.zip
    };

    installPhase =
      let
        matchForChrome = "yield utils_1.default.copyExtension(pathToExtension, extensionDest);";
        appendForChrome = "yield fs_1.fs.chmodAsync(extensionBg, 0o0644);";

        matchForFirefox = "copyExtension(pathToExtension, extensionDest)";
        replaceForFirefox = "copyExtension(pathToExtension, extensionDest).then(() => fs.chmodAsync(extensionBg, 0o0644))";
      in
      ''
        sed -i '/${matchForChrome}/a\${appendForChrome}' ./resources/app/packages/server/lib/browsers/chrome.js
        sed -i 's/${matchForFirefox}/${replaceForFirefox}/' ./resources/app/packages/server/lib/browsers/utils.js
      '' + oldAttrs.installPhase;
  });
}

... and after:

## NOTE: This is a Nix overlay file taken and modified from:
##
## https://gist.github.com/r-k-b/2485f977b476aa3f76a47329ce7f9ad4
##
##
## When Cypress starts, it copies some files into
##
## ~/.config/Cypress/cy/production/browsers/chrome-stable/interactive/CypressExtension/
##
## ... from the Nix Store, one of which it attempts to modify immediately
## after. As-is, this fails because the copied file keeps the
## read-only flag it had in the Store.
##
## Luckily, the code responsible is a plain text script that we can
## easily patch:
final: prev: {
  cypress = prev.cypress.overrideAttrs (oldAttrs: rec {
    pname = "cypress";
    version = "12.1.0";

    src = prev.fetchzip {
      url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
      sha256 = "1jbjsgb3msjlx0y6wjvb99n3v009sc0nq19grlad57f2p5y0iy09";
      ## Note: sha256 is computed via (note the version):
      ##
      ## nix-prefetch-url --unpack https://cdn.cypress.io/desktop/12.1.0/linux-x64/cypress.zip
    };
  });
}