Playwright: Difference between revisions

From NixOS Wiki
imported>Voidless
Created page with "== Installing browsers for playwright under NixOS == Normally at first run, playwright will tell you to run <code>playwright install</code>. The purpose of this is to install..."
 
Break out visual studio code part into its own section
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Installing browsers for playwright under NixOS ==
== Installing browsers for playwright under NixOS ==
Normally at first run, playwright will tell you to run <code>playwright install</code>. The purpose of this is to install browsers for you that it can than use for testing. The installation itself will technically work. Unfortunately the installed browsers will not be suitable to be used inside NixOS. This is due to the fact that dependencies will not be at places where the browsers expect them to be. To mitigate this problem, nixpkgs has a package called <code>playwright-driver.browsers</code>. Before you start your script make sure to set
 
Normally, at first run, [https://playwright.dev/ playwright] will tell you to run <code>playwright install</code>. The purpose of this is to install browsers for you that it can then use for testing. The installation itself will technically work. Unfortunately, the installed browsers will not be suitable to be used inside NixOS. This is due to the fact that dependencies will not be at places where the browsers expect them to be. To mitigate this problem, nixpkgs has a package called <code>playwright-driver.browsers</code>. Before you start your script, make sure to set
<syntaxHighlight lang=nix>
<syntaxHighlight lang=nix>
export PLAYWRIGHT_BROWSERS_PATH=/path/to/drivers
export PLAYWRIGHT_BROWSERS_PATH=/path/to/drivers
</syntaxHighlight>
</syntaxHighlight>


=== Python example ===
You can for example put this <code>shell.nix</code> in the directory with your playwright-related code:
The following flake may be used with <code>nix develop</code> to develop your playwright script:
 
<syntaxHighlight lang=nix>
<syntaxHighlight lang=nix>
{
{ pkgs ? import <nixpkgs> {} }:
   description = "Python shell flake";
   pkgs.mkShell {
    nativeBuildInputs = [
      pkgs.playwright-driver.browsers
    ];


  inputs = {
    shellHook = ''
     nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
      export PLAYWRIGHT_BROWSERS_PATH=${pkgs.playwright-driver.browsers}
    flake-utils.url = "github:numtide/flake-utils";
      export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true
     '';
}
</syntaxHighlight>


    mach-nix.url = "github:davhau/mach-nix";
== Playwright with Visual Studio Code ==
  };


  outputs = { self, nixpkgs, mach-nix, flake-utils, ... }:
If you are using playwright with [https://wiki.nixos.org/wiki/Visual_Studio_Code Visual Studio Code], you may want to add <code>vscode</code> to the package list shown earlier. With Visual Studio Code installed you can  run <code>nix-shell --run "code ."</code> to open your playwright-related directory.
    let
      pythonVersion = "python39";
    in
    flake-utils.lib.eachDefaultSystem (system:
      let
        pkgs = nixpkgs.legacyPackages.${system};
        mach = mach-nix.lib.${system};


        pythonEnv = mach.mkPython {
Don't forget to install the <code>Playwright Test for VSCode</code> extension in Visual Studio Code.
          python = pythonVersion;
          requirements = ''
            playwright
          '';
        };
      in
      {
        devShells.default = pkgs.mkShellNoCC {
          packages = [ pythonEnv ];


          shellHook = ''
Then you should be able to run your tests in Visual Studio Code.
            export PYTHONPATH="${pythonEnv}/bin/python"
 
            export PLAYWRIGHT_BROWSERS_PATH="${pkgs.playwright-driver.browsers}";
{{Note|Keep in mind that you need to use the same version of playwright in your node playwright project as in your nixpkgs, or else playwright will try to use browsers versions that aren't installed!}}
          '';
        };
      }
    );
}
</syntaxHighlight>

Latest revision as of 11:03, 18 October 2024

Installing browsers for playwright under NixOS

Normally, at first run, playwright will tell you to run playwright install. The purpose of this is to install browsers for you that it can then use for testing. The installation itself will technically work. Unfortunately, the installed browsers will not be suitable to be used inside NixOS. This is due to the fact that dependencies will not be at places where the browsers expect them to be. To mitigate this problem, nixpkgs has a package called playwright-driver.browsers. Before you start your script, make sure to set

export PLAYWRIGHT_BROWSERS_PATH=/path/to/drivers

You can for example put this shell.nix in the directory with your playwright-related code:

{ pkgs ? import <nixpkgs> {} }:
  pkgs.mkShell {
    nativeBuildInputs = [
      pkgs.playwright-driver.browsers
    ];

    shellHook = ''
      export PLAYWRIGHT_BROWSERS_PATH=${pkgs.playwright-driver.browsers}
      export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true
    '';
}

Playwright with Visual Studio Code

If you are using playwright with Visual Studio Code, you may want to add vscode to the package list shown earlier. With Visual Studio Code installed you can run nix-shell --run "code ." to open your playwright-related directory.

Don't forget to install the Playwright Test for VSCode extension in Visual Studio Code.

Then you should be able to run your tests in Visual Studio Code.

Note: Keep in mind that you need to use the same version of playwright in your node playwright project as in your nixpkgs, or else playwright will try to use browsers versions that aren't installed!