Playwright: Difference between revisions

(One intermediate revision by one other user not shown)

Line 39:

=== devenv.nix ===

<~~syntaxHighlight~~ lang=nix>

{ pkgs, lib, config, inputs, ... }:

Line 70:

# https://devenv.sh/scripts/

scripts.intro.exec = ''

playwrightNpmVersion="$(npm ~~show~~ @playwright/test ~~version~~)"

playwrightNpmVersion="$(npm view ./. devDependencies'[@playwright/test]')"

echo "❄️ Playwright nix version: ${pkgs-playwright.playwright.version}"

echo "📦 Playwright npm version: $playwrightNpmVersion"

Line 90:

# See full reference at https://devenv.sh/reference/options/

}

</~~syntaxHighlight~~>

</syntaxhighlight>

=== devenv.yaml ===

Line 133:

</syntaxHighlight>

== Playwright via Docker ==

https://playwright.dev/docs/docker#remote-connection can be a good option to make use of a container (instead of wrestling with NixOS) to run browsers.<syntaxhighlight lang="nix"># devenv.nix example that simplifies the configuration

# but it's easy to setup the env var and run the command manually without devenv too

{

env.PW_TEST_CONNECT_WS_ENDPOINT = "ws://127.0.0.1:3000/";

# run it with `devenv processes up` and in another terminal run `npm exec playwright test`

processes.pw-remote.exec = "docker run -p 3000:3000 --rm --init --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.52.0-noble /bin/sh -c 'npx -y playwright@1.52.0 run-server --port 3000 --host 0.0.0.0'";

}</syntaxhighlight>Will need a slight tweak like below for the IP address due to a small limitation comes with the container use.<syntaxhighlight lang="typescript">

// example.spec.ts

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {

// await page.goto('http://localhost:3333/'); // can't do due to the browsers running within a container but your server is running on the host

await page.goto('http://host.docker.internal:3333/'); // so do this instead

// also make sure your server code runs for playwright, too - https://playwright.dev/docs/test-webserver#configuring-a-web-server

await expect(page).toHaveTitle(/your website/);

});

</syntaxhighlight>

[[Category:Development]]

@@ Line 39: / Line 39: @@
 === devenv.nix ===
-<syntaxHighlight lang=nix>
+<syntaxhighlight lang="nix">
 { pkgs, lib, config, inputs, ... }:
@@ Line 70: / Line 70: @@
    # https://devenv.sh/scripts/
    scripts.intro.exec = ''
-     playwrightNpmVersion="$(npm show @playwright/test version)"
+     playwrightNpmVersion="$(npm view ./. devDependencies'[@playwright/test]')"
      echo "❄️ Playwright nix version: ${pkgs-playwright.playwright.version}"
      echo "📦 Playwright npm version: $playwrightNpmVersion"
@@ Line 90: / Line 90: @@
    # See full reference at https://devenv.sh/reference/options/
 }
-</syntaxHighlight>
+</syntaxhighlight>
 === devenv.yaml ===
@@ Line 133: / Line 133: @@
 </syntaxHighlight>
+== Playwright via Docker ==
+https://playwright.dev/docs/docker#remote-connection can be a good option to make use of a container (instead of wrestling with NixOS) to run browsers.<syntaxhighlight lang="nix"># devenv.nix example that simplifies the configuration
+# but it's easy to setup the env var and run the command manually without devenv too
+{
+  env.PW_TEST_CONNECT_WS_ENDPOINT = "ws://127.0.0.1:3000/";
+  # run it with `devenv processes up` and in another terminal run `npm exec playwright test`
+  processes.pw-remote.exec = "docker run -p 3000:3000 --rm --init --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.52.0-noble /bin/sh -c 'npx -y playwright@1.52.0 run-server --port 3000 --host 0.0.0.0'";
+}</syntaxhighlight>Will need a slight tweak like below for the IP address due to a small limitation comes with the container use.<syntaxhighlight lang="typescript">
+// example.spec.ts
+import { test, expect } from '@playwright/test';
+test('has title', async ({ page }) => {
+  // await page.goto('http://localhost:3333/'); // can't do due to the browsers running within a container but your server is running on the host
+  await page.goto('http://host.docker.internal:3333/'); // so do this instead
+  // also make sure your server code runs for playwright, too - https://playwright.dev/docs/test-webserver#configuring-a-web-server
+  await expect(page).toHaveTitle(/your website/);
+});
+</syntaxhighlight>
 [[Category:Development]]