Learn from Google – Use Google Cloud Build

We all want to catch and fix problems as early as possible. In software development, this mindset helps development teams create a culture of continuous improvement. To automate best practices, like Continuous Integration & Continuous Delivery (CI/CD), teams are adopting tools that help automate continuous improvement. Google has created a great tool in Google Cloud Build.

By creating Google Cloud Build, Google has created a platform that helps every software developer from every walk of life, on teams of every size. Google Cloud Build is a fully managed cloud application development environment. It includes an associated set of build and test management tools that also encompasses automation and workflow controls, along with privacy and vulnerability analysis intelligence.

Regardless of the speed or scale that teams are able to build, test and deploy software. This is very much aligned with the vision of Applitools specially after the launch of the Ultrafast Visual Grid. Supporting an integration between Google Cloud Build and Applitools provides every software developer the ability to run their tests across all environments at the speed of light and get the feedback seamlessly in second as a part of the build process.

Integrate Applitools with Google Cloud Build

To get started, follow the following steps to integrate Applitools into your Google Cloud Build. 

• Step 1: Create an account on Google Cloud Platform.
• Step 2: Navigate to the Cloud build.

Create the trigger and select your source code management tool (in this example I have chosen GitHub ) and  connect your repository.

Allow the required access to perform the trigger runs on every commit on each branch or each pull request.

Edit your trigger and select the Build Configuration as Cloudbuild.yaml or Dockerfile.

Once you make a small change in application and push it up to GitHub this will kick off the Cloud Build trigger you’ve just created.

Continue With Applitools Setup

Now follow these steps to configure your Applitools setup.

• Step 1: Navigate to admin panel in the Applitools eyes dashboard

• Step 2: Go to Teams and select your team

• Step 3: Select your team and Navigate to Integrations Section

• Step 4: Integrate your GitHub repo with Applitools

Run Your Cypress Tests

Now, run your Cypress tests on Google Cloud build.

• Step 1: Let us clone the demo Cypress project from Applitools Cypress

https://applitools.com/tutorials/cypress.html 

• Step 2: Create a cloudbuild.yaml file to pass the build steps.

	steps:
	# Uses the docker build step to build an image called my-image '--build-arg','COMMIT_ID=$COMMIT_SHA'
	- name: 'gcr.io/cloud-builders/docker'
	args: ['build','-t', 'gcr.io/my-project/github.com/username/repository:$COMMIT_SHA', '.','--build-arg','COMMIT_ID=$COMMIT_SHA','--build-arg','Git_branch=$BRANCH_NAME']

view raw cloudbuild.yaml hosted with ❤ by GitHub

To run a Cypress end-to-end test let’s use a Docker.

In the Docker file we have defined the steps to copy the Docker images, files, Cypress folder, add configurations and execute the scripts.

Make sure to set the APPLITOOLS_API_KEY as ENV variable or access it from secrets in the Docker file.

	#Docker file is based on example Cypress E2E tests created by glebbahmutov
	#https://github.com/bahmutov/google-cloud-build-example
	# multi-stage Docker build with testing node_modules and Cypress binary
	# discarded before serving in production
	# https://glebbahmutov.com/blog/making-small-docker-image/
	# testing image - we really want to cache AS MUCH AS POSSIBLE
	# so we build like this
	# - copy package files
	# - run "npm ci"
	# - copy spec files
	# this way Cypress and node_modules are cached as long as package files stay same
	# Docker build looks at the file checksums during each "COPY ..." command
	# and if the copied files were the same, the image layer is cached and not recomputed
	# https://docs.docker.com/v17.09/engine/userguide/eng-image/dockerfile_best-practices/#build-cache
	# every other command like "RUN npm ci" is cached by default unless the command itself has been changed
	FROM cypress/base:10 as TEST
	WORKDIR /
	# dependencies will be installed only if the package files change
	COPY package.json .
	COPY package-lock.json .
	# by setting CI environment variable we switch the Cypress install messages
	# to small "started / finished" and avoid 1000s of lines of progress messages
	# https://github.com/cypress-io/cypress/issues/1243
	ENV CI=1
	RUN npm ci
	# tests will rerun if the "cypress" folder, "cypress.json" file or "public" folder
	# has any changes
	# copy tests
	COPY cypress cypress
	COPY cypress.json .
	COPY applitools.config.js .
	# copy what to test
	# to avoid Docker thinking it is the same command and skipping tests
	# have a dummy command here
	# see discussion in https://github.com/moby/moby/issues/1996
	# find variable that changes. For example on Zeit.co Now GitHub deploys the HOSTNAME changes
	# RUN env
	ARG HOSTNAME=1
	ARG COMMIT_ID=$COMMIT_SHA
	ARG Git_branch=$BRANCH_NAME
	# if you run "docker build . --build-arg HOSTNAME=foo"
	# it will bust this cache and it will rerun all commands from here
	#Configure your applitools api key by setting it as ENV variable below or access it fromm secrets
	ENV APPLITOOLS_API_KEY #INSERTKEY VALUE
	RUN echo $APPLITOOLS_API_KEY
	ENV APPLITOOLS_BATCH_ID=$COMMIT_ID
	ENV APPLITOOLS_BRANCH_NAME=$Git_branch
	RUN echo $APPLITOOLS_BATCH_ID
	RUN echo $APPLITOOLS_API_KEY
	RUN ls -la
	RUN ./node_modules/cypress/bin/cypress run --spec "cypress/integration/examples/applitools.spec.js"
	#RUN npm test
	# RUN apt-get update && apt-get install -y \
	# curl
	RUN echo $APPLITOOLS_BATCH_ID
	RUN echo $APPLITOOLS_API_KEY
	RUN curl -d '' -X POST https://eyesapi.applitools.com/api/externals/github/servers/github.com/commit/$APPLITOOLS_BATCH_ID/complete?apiKey=$APPLITOOLS_API_KEY
	#Reports applitools build status

view raw Dockerfile hosted with ❤ by GitHub

Applitools build status is reported based on COMMIT_SHA, hence we need to access the git commit_sha in the Docker and assign the COMMIT_SHA to Applitools BatchID as ENV variable.

Once the test is completed the curl command in Docker will perform a post call to update the build status.

Once you build your project. Applitools can visually validate each commit and reports the build status.

Watch the video to try out the integrations & Keep Testing!