Selcuk Temizsoy
12 min readNov 20, 2022

--

npx create-react-app my-app
create-react-app output
cd my-app
npm start
npm start output
localhost:3000
#!bin/bash
npm start
FROM node:16-alpine

WORKDIR /app

COPY . /app/
RUN npm install

ENTRYPOINT [ "sh", "bin/run.sh" ]
docker build -f .docker/frontend/dockerfile.dev -t frontend .
docker run -p 3000:3000 frontend
Selenium project structure
.env file
.env.local
Driver
Feature: My first feature
Scenario: my first scenario
When I go to homepage
Then homepage should open
Step definition
env $(cat .env.local) mvn test
FROM maven:3.6-jdk-11
WORKDIR /tests
COPY ../pom.xml .
RUN mvn install
COPY .. .
ENTRYPOINT [ "tail", "-f", "/dev/null" ]
#!/bin/bash
env $(cat .env) mvn test
name: Selenium test CI pipeline
on:
push:
branches: [ master ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout the code
uses: actions/checkout@v3
- name: Login to Docker Hub
uses: docker/login-action@v2
with:
username: ${{ secrets.DOCKER_HUB_USERNAME }}
password: ${{ secrets.DOCKER_HUB_PASSWORD }}
- name: Setup Docker Buildx
uses: docker/setup-buildx-action@v2
- name: Build images
uses: docker/build-push-action@v3
with:
context: .
file: .docker/Dockerfile
push: true
tags: selcuktemizsoy/selenium-demo:latest
Adding Secrets
Secrets page
Github action page workflow in queue
version: '3.9'

services:
frontend:
build:
context: .
dockerfile: .docker/frontend/Dockerfile.dev
ports:
- '3000:3000'

selenium-hub:
image: selenium/hub:4.6.0-20221104
ports:
- '4442:4442'
- '4443:4443'
- '4444:4444'

firefox:
image: selenium/node-firefox:4.6.0-20221104
depends_on:
- selenium-hub
volumes:
- /dev/shm:/dev/shm
shm_size: 2gb
environment:
- SE_EVENT_BUS_HOST=selenium-hub
- SE_EVENT_BUS_PUBLISH_PORT=4442
- SE_EVENT_BUS_SUBSCRIBE_PORT=4443
- SE_NODE_SESSION_TIMEOUT=25
- SE_NODE_MAX_INSTANCE=1
- SE_NODE_MAX_SESSIONS=1

selenium-host:
image: selcuktemizsoy/selenium-demo:latest
docker-compose -f docker-compose.ci.yml build
docker-compose -f docker-compose.ci.yml up -d
docker-compose -f docker-compose.ci.yml exec -T selenium-host sh bin/run.sh
docker-compose -f docker-compose.ci.yml down
#!bin/bash
until $(curl --output /dev/null --silent --head --fail http://localhost:4444 && curl --output /dev/null --silent --head --fail http://localhost:3000 ); do
echo "waiting for selenium hub and react app being started"
sleep 1
done
# building docker images 
build-ci-env:
docker-compose -f docker-compose.ci.yml build
# starting docker-compose
start-ci-env:
docker-compose -f docker-compose.ci.yml up -d
# wait for app and hub
wait-ci-env:
sh bin/wait.sh
# start selenium test inside of the container
start-ci-test:
docker-compose -f docker-compose.ci.yml exec -T selenium-host sh bin/run.sh
# stop environment
stop-ci-env:
docker-compose -f docker-compose.ci.yml down
name: react app CI
on:
push:
branches: [master]

jobs:
build-and-test-frontend:
runs-on: ubuntu-latest
steps:
- name: Checkout the code
uses: actions/checkout@v3
- name: Setup Docker Buildx
uses: docker/setup-buildx-action@v2
- name: Setup CI environment
run: make build-ci-env
- name: Start CI environment
run: make start-ci-env
- name: Wait for selenium hub to be ready
run: make wait-ci-env
- name: Start tests
run: make start-ci-test
- name: Deploy
run: echo "you can add deployment steps from now on. Remaining steps will be running after the previous steps have passed."
Test Workflow
Test step from workflow

--

--