integrate device and browser properties in Traffic class #1

	name: Run Playwright and Generate a video, screenshots, and LightHouse HTML Report
	on:
	push:
	branches: "*"
	workflow_dispatch:
	jobs:
	build:
	runs-on: ubuntu-latest
	steps:
	- name: Checkout code
	uses: actions/checkout@v3
	- name: Set up Node.js
	uses: actions/setup-node@v3
	with:
	node-version: "17.x"
	- name: Install dependencies
	run: \|
	sudo apt-get update
	sudo apt-get install -y libgbm-dev
	npm ci
	npx playwright install chromium
	npm install -g lighthouse chrome-launcher axe-core chromium wait-on
	npm install next@latest
	- name: Create the build
	run: npx next build
	- name: Check and kill process on port 3000
	run: \|
	sudo fuser -k 3000/tcp \|\| true
	- name: Start the application
	run: \|
	export DISPLAY=:1
	echo "Starting the application..."
	npm run start & npx wait-on --timeout 50000 http://0.0.0.0:3000/
	echo "Application started."
	- name: Run Playwright tests
	run: npx playwright test --config=playwright.config.js

	- name: Create/Check test-results directory
	run: \|
	if [ ! -d "test-results" ]; then
	mkdir test-results
	fi

	- name: Generate Lighthouse Report
	run: \|
	lighthouse http://localhost:3000/ --output html --output-path ./test-results/report.html --chrome-flags="--headless --no-sandbox --disable-gpu"
	- name: Upload report, screenshots and videos of failed tests
	uses: actions/upload-artifact@v3
	with:
	name: test-results
	path: ./test-results

Provide feedback