virtual web browser - nglthu/JavaGuiProject GitHub Wiki

https://notes.dt.in.th/CodespacesDisplayServer

When running a default [Codespaces](https://notes.dt.in.th/Codespaces) image, sometimes I want to use GUI applications (e.g. web browsers for testing).

This is possible with [noVNC](https://novnc.com/)
[(opens new window)](https://novnc.com/) (a web-based VNC client) and [Xtigervnc](https://tigervnc.org/)

[(opens new window)](https://tigervnc.org/) (a VNC server that supports X11). Here’s a script to set them up with [Docker](https://notes.dt.in.th/Docker) Compose. To use it, copy the following snippet into a new Bash terminal:

mkdir -p ~/setup-display && cd ~/setup-display
cat > docker-compose.yml <<EOF
services:
  display:
    image: ghcr.io/dtinth/xtigervnc-docker:main
    tmpfs: /tmp
    restart: always
    environment:
      VNC_GEOMETRY: 1440x900
    ports:
      - 127.0.0.1:5900:5900
      - 127.0.0.1:6000:6000
  novnc:
    image: geek1011/easy-novnc
    restart: always
    command: -a :5800 -h display --no-url-password
    ports:
      - 127.0.0.1:5800:5800
EOF
docker compose up -d

Once run, we need to tell our applications to connect to the server we started. To do that, set the DISPLAY environment variable to 127.0.0.1:0:

export DISPLAY=127.0.0.1:0

Once that’s done, we can start our GUI applications from that terminal.
[#](https://notes.dt.in.th/CodespacesDisplayServer#playwright-test-vs-code)
Playwright Test + VS Code

To [use Playwright Test with VS Code](https://playwright.dev/docs/getting-started-vscode)

[(opens new window)](https://playwright.dev/docs/getting-started-vscode) in GitHub Codespaces:

    Go to Settings in VS Code.

    Click on Remote [Codespaces] tab.

    Search for playwright.env and then click on Edit in settings.json.

    Add the following to the settings:

      "playwright.env": {
        "DISPLAY": "127.0.0.1:0"
      }

After this, you should be able to debug [Playwright](https://notes.dt.in.th/Playwright) tests in VS Code.

Note that the [“Show & reuse browser” feature introduced in Playwright v1.25](https://github.com/microsoft/playwright/releases/tag/v1.25.0)
[(opens new window)](https://github.com/microsoft/playwright/releases/tag/v1.25.0) is not working yet. [A workaround is available in the Playwright GitHub issue](https://github.com/microsoft/playwright/issues/17616)

[(opens new window)](https://github.com/microsoft/playwright/issues/17616).

[—](https://notes.dt.in.th/)[@dtinth](https://dt.in.th/)