UI Testing Cypress installation failed

Frappe Framework
,
1

image
image760×143 8.18 KB

unable to install or open cypress in v14

Error 1:
DevTools listening on ws://127.0.0.1:44825/devtools/browser/31e7fe90-3ab8-4f6f-9ff6-5a81bf56def7

Error 2:
[114891:0622/080746.489547:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.

they mention in Github

this link mention need to upgrade cypress to Cypress v12.12.0, but mine is Cypress: 12.15.0, still having the same issue.

Any ideas?

2

Check if this helps

Try the bench commands instead of cypress cli. Execute bench --help for more.

3

image
image774×161 8.76 KB

still getting the same output…

4

You can try --headless tests?

I think you’ll need additional Debian dependencies and Google chrome to be installed.

sudo apt-get update && sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -O /tmp/chrome.deb
sudo apt install -y /tmp/chrome.deb && rm /tmp/chrome.deb

Also there’s no way you can open your regular browser from cypress in devcontainer. Add following to your devcontainer docker compose and rebuild containers

  # For testing cypress in devcontainers
  x11-bridge: # https://github.com/JAremko/docker-x11-bridge
    image: jare/x11-bridge
    volumes:
      - "/tmp/.X11-unix:/tmp/.X11-unix:rw"
    ports:
      - "8080:8080"
    restart: always
    environment:
      MODE: tcp
      XPRA_HTML: "yes"
      DISPLAY: ":14"
      XPRA_TCP_PORT: "8080"
      XPRA_PASSWORD: admin # This password can be anything you want.

  frappe:
    image: frappe/bench:latest
    command: ["tail", "-f", "/dev/null"]
    environment:
      - SHELL=/bin/bash
      # For cypress testing
      - DISPLAY=:14
      - LIBGL_ALWAYS_INDIRECT=0
    volumes:
      - ..:/workspace:cached
      - ${HOME}/.ssh:/home/frappe/.ssh
    working_dir: /workspace/development
    ports:
      - 8000-8005:8000-8005
      - 9000-9005:9000-9005
    volumes_from:
      - x11-bridge:rw
    depends_on:
      - x11-bridge

You’ll be able to access X on browser (localhost:8080) where your chrome from devcontainer will open.

5

I wanted to use cypress testing for my custom frappe app within devcontainers.
I have a mac and I installed xquartz and obtained the DISPLAY ip after running install_x11_deps.sh in my local environment.
I viewed the development.md file and docker-compose ui-tester service. But I am not able to understand what steps needs to be taken to enable this service.

How is the ui-tester service getting connected to the frappe-bench service?

I also referred gameplan repository to get some insights.
After installing cypress yarn package within the frontend service of the custom frappe app, when I try to run cypress run or cypress open, I am getting this error:

It looks like this is your first time using Cypress: 13.7.0


Your system is missing the dependency: Xvfb

Install Xvfb and run Cypress again.

Read our documentation on dependencies for more information:

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

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

----------

Error: spawn Xvfb ENOENT

----------

Platform: linux-arm64 (Debian - 12)
Cypress Version: 13.7.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Can you help me out here?

6

I managed to solve this by running install_x11_deps.sh and setting the DISPLAY variable within shell.

NOTE
Use xquartz for enabling UI testing on macOS. Also enable Settings->Security->Allow connections from new clients

Then for the docker-compose, i used this:

version: "3.7"
services:
...
  ui-tester:
    # pass custom command to start Cypress otherwise it will use the entrypoint
    # specified in the Cypress Docker image.
    # also pass "--project <folder>" so that when Cypress opens
    # it can find file "cypress.json" and show integration specs
    # https://on.cypress.io/command-line#cypress-open
    entrypoint: "cypress --project path/to/project open"
    image: "docker.io/cypress/included:latest"
    environment:
      - SHELL=/bin/bash
        # get the IP address of the host machine and allow X11 to accept
        # incoming connections from that IP address
        #IP=$(ipconfig getifaddr en0) #or mac or \
        #  IP=$($(hostname -I | awk '{print $1}') ) #for Ubuntu
        #/usr/X11/bin/xhost + $IP
        # then pass the environment variable DISPLAY to show Cypress GUI on the host system
        #DISPLAY=$IP:0
      - DISPLAY
    volumes:
      # for Cypress to communicate with the X11 server pass this socket file
      # in addition to any other mapped volumes
      - /tmp/.X11-unix:/tmp/.X11-unix
      - ..:/workspace:z,cached
    network_mode: "host"

After this, start the devcontainer and install cypress within your node environment.

NOTE
The UI tester would also require some dependencies installed. Refer Seamless Cypress Installation Guide | Cypress Documentation

After all these steps, run npx cypress open or yarn cypress open