CODEWITHSUNDEEP
reactjsplaywright
Kode_12
Kode_12

Reputation: 4818

Cannot run Playwright test --ui if Playwright package is installed

I'm trying to run npx playwright test --ui to run the playwright e2e test files, I believe this keys off of the "@playwright/test" package.

I also have a need for the "playwright" package to leverage the 'chromium' module. The problem is that after I install "playwright", when I try to run the tests, I get the following error:

nextjs-ramen % npx playwright test --ui       
 Please install @playwright/test package to use Playwright Test.
 npm install -D @playwright/test

After I run the suggested command npm install -D @playwright/test, it gives me the same error as mentioned above. I'm new to playwright, so I'm not sure if there is a configuration I need to have both @playwright/test and playwright packages work

Upvotes: 0

Views: 7084

Answers (5)

CabralSJM
CabralSJM

Reputation: 41

First, I’d recommend running the following command:

npx playwright install --with-deps

If the error persists, I suggest using a containerized environment.

I will provide a brief summary of what you can read in my article on Medium - Docker for QAs: Standardizing Your Tests with Playwright

1 - Create a folder named .devcontainer.

2 - Create a Dockerfile and add the following content:

# Use a imagem base do Playwright
FROM mcr.microsoft.com/playwright:v1.49.1-focal


RUN hwclock --hctosys || true


RUN apt-get update && apt-get install -y software-properties-common \
    && curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add - \
    && add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" \
    && apt-get install -y docker-ce-cli \
    && curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash \
    && export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" \
    && [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" \
    && nvm install 20.11.1


RUN npm install -g npm@latest


RUN apt-get install -y libgtk-3-0 libx11-xcb1 libxcomposite1 libxcursor1 libxdamage1 libxi6 libxtst6 libnss3 libxrandr2 libasound2 libpangocairo-1.0-0 libatk1.0-0 libatk-bridge2.0-0 libepoxy0 libgbm-dev libxshmfence1


SHELL ["/bin/bash", "-c"]


WORKDIR /workspace


COPY package.json package-lock.json ./
RUN npm ci && npx playwright install


EXPOSE 3000


CMD ["sleep", "infinity"]

3 - Create a docker-compose.yml file and add the following content:

version: '3.8'

services:
  playwright:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - ..:/workspace
      - /var/run/docker.sock:/var/run/docker.sock
      - /tmp/.X11-unix:/tmp/.X11-unix
    environment:
      - DISPLAY=${DISPLAY}
      - NVM_DIR=/root/.nvm
    ports:
      - "3000:3000"
    command: /bin/bash -c "sleep infinity"
    tty: true

4 - Run the command:

cd .devcontainer

docker-compose -f docker-compose.yml up -d --build

5 - Run the command:

docker exec -it <nome-do-container> /bin/bash

Upvotes: 0

suleimanforever
suleimanforever

Reputation: 71

Make sure you are running the required version of Node by running "node -v", the currently latest version of Playwright requires Node version 18 or higher.

Upvotes: 0

user25336138
user25336138

Reputation: 46

I've run into this issue in the past, I recommend doing the following:

Ensure you have both the Playwright and @playwright/test packages installed by running the following command

npm install playwright @playwright/test (if this a development only dependency feel free to add the --save-dev tag)

Once this is done run the npx playwright --version command. If the installation was successful then the playwright version will display.

Lastly I would ensure your config includes chromium as a "project" here's the docs to reference to ensure this is set and installed properly https://playwright.dev/docs/browsers#chromium. I hope this helps and happy testing!

Upvotes: 1

Graffhyrum
Graffhyrum

Reputation: 59

Not sure if you're still having this issue, but what OS and node/npm version are you on?

the @playwright/test package and the playwright library shouldn't need to both be installed (see https://playwright.dev/docs/library), and I'm pretty sure it can cause issues if you have both. The general rule of thumb is: if you need the testing framework, use /test, and if you jut want browser automation, use the base library. You should be able to use the chromium fixture from /test via import { chromium } from '@playwright/test';.

Upvotes: 0

Saliya Gunawardena
Saliya Gunawardena

Reputation: 53

I honestly didn't encounter this issue, but usually, if you uninstall and install Playwright again might rectify the issue. If you are using VS code, I suggest using the Playwright extension to install it. It sorts out so many issues. However, there are some similar problems and answered in following links

https://github.com/Microsoft/playwright/issues/6981

https://github.com/microsoft/playwright/issues/23098

Upvotes: 3

Related Questions