Hey everyone! I need help with a Docker setup problem.
My situation: I want to run Playwright tests with the UI visible (headless set to false) inside a Docker container on my Cloud Linux server.
The error I keep getting: “Looks like you launched a headed browser without having a XServer running. Set either ‘headless: true’ or use ‘xvfb-run ’ before running Playwright.”
My setup:
docker-compose.yml:
version: "3.9"
services:
playwright-tests:
build: .
volumes:
- .:/workspace
working_dir: /workspace
command: npx playwright test specs/login.spec.js --ui
Dockerfile:
FROM node:20-bookworm
RUN npx -y [email protected] install --with-deps
WORKDIR /workspace
COPY package.json package-lock.json* ./
RUN npm ci
COPY . .
CMD ["npx", "@playwright/test", "test", "--reporter=html"]
login.spec.js:
import { chromium } from 'playwright';
const userEmail = '[email protected]';
const userPass = 'secret456';
const authPath = './storage/session-data.json';
const browserInstance = await chromium.launch({ headless: true });
const browserContext = await browserInstance.newContext();
const currentPage = await browserContext.newPage();
try {
await currentPage.goto('https://www.example-site.com/signin');
await currentPage.waitForTimeout(5000);
await currentPage.waitForSelector('input[name="email"]', { state: 'visible', timeout: 8000 });
await currentPage.waitForSelector('input[name="password"]', { state: 'visible', timeout: 8000 });
await currentPage.fill('input[name="email"]', userEmail);
await currentPage.fill('input[name="password"]', userPass);
await currentPage.click('input[type="submit"]');
await currentPage.waitForTimeout(5000);
await browserContext.storageState({ path: './storage/session-data.json' });
console.log('Authentication saved to:', authPath);
} catch (err) {
console.error('Login process failed:', err);
} finally {
await browserInstance.close();
}
I tried AI suggestions but they make the container freeze. Anyone know how to fix this XServer issue? Thanks!