Software Development

Install cypress.io dependencies on Amazon Linux AMI ec2 instance

Sudip Raval • Jan 19, 2019

This post is only focused on how to install dependencies required by cypress.iofront-end testing tool on Amazon Linux AMI EC2 instance. To setup cypress tool for testing, please refer their official documentation. If you’re just interested to get the dependencies installed on amazon ec2 with AMI (rather then reading the explanation), then jump to this automation part directly!

We recently changed our front end testing tool from Casper to cypress. Check out the features that why we chose cypress!

SIDE NOTE

This post was originally written when I was trying to deal with this problem with version of Cypress 1.4.1. As of version 3.0 they changed the binary folder path, downloads the matching version binary to the global system cache, so that the binary can be shared between projects. If you haven’t upgrade it then you should do it to the latest version (as of writing this, it’s 3.0.1) and also checkout the change log to see the coolest update they made.

When I did set up the cypress.io tool (version: 3.0.1) on our build machine which runs on Amazon Linux AMI, I just tried to run it in headless mode. It was griping about one of the missing dependencies XVFB (X virtual framebuffer).

XVFB missing while running test cases using cypress tool

I also checked out the official doc to get work around with the dependencies, but that was not enough. I took the same approach to resolve the dependencies by using ldd program.

The ldd (list dynamic dependencies) can be used to show you the shared libraries required by any given program.

I already did the set up for the kitchensink example project in the home directory with its dependencies.
please update the package.json with latest cypress version in devDependencies
before doing npm install. As of writing this, package.json still has old version (2.1.0) of cypress in devDependencies.

As I mentioned earlier in SIDE NOTE that as of version 3.0, Cypress downloads the matching Cypress binary to the global system cache and that default location for Linux is ~/.cache/Cypress.

So, you will see which shared libraries are required by Cypress binary when you hit the command ldd ~/.cache/Cypress/3.0.1/Cypress/Cypress, but we’re interested to cover only missing libraries. So we will pipe the command grepwith the command ldd to find out not found libraries and the command is ldd ~/.cache/Cypress/3.0.1/Cypress/Cypress | grep 'not found'.

$ ldd ~/.cache/Cypress/3.0.1/Cypress/Cypress | grep 'not found' libgtk-x11-2.0.so.0 => not found libgdk-x11-2.0.so.0 => not found libatk-1.0.so.0 => not found libpangocairo-1.0.so.0 => not found libgdk_pixbuf-2.0.so.0 => not found libcairo.so.2 => not found libpango-1.0.so.0 => not found libXcursor.so.1 => not found libXdamage.so.1 => not found libXrandr.so.2 => not found libXfixes.so.3 => not found libXss.so.1 => not found libgconf-2.so.4 => not found libcups.so.2 => not found

As you can see, it’s not just XVFB, but there are 14 shared libraries as per the above output which are required by Cypress. Let’s cover those first, which are easily available on Amazon Linux AMI.

So, let’s install that first, as XVFB easily available on Amazon Linux.

yum -y install Xvfb

After this, If you check again the missing libraries using ldd command:

$ ldd ~/.cache/Cypress/3.0.1/Cypress/Cypress | grep 'not found' libgtk-x11-2.0.so.0 => not found libgdk-x11-2.0.so.0 => not found libatk-1.0.so.0 => not found libpangocairo-1.0.so.0 => not found libgdk_pixbuf-2.0.so.0 => not found libcairo.so.2 => not found libpango-1.0.so.0 => not found libXcursor.so.1 => not found libXrandr.so.2 => not found libXss.so.1 => not found libgconf-2.so.4 => not found libcups.so.2 => not found

If you give attention closely in the above output, you will notice there are only 12 shared libraries missing now, as XVFB installation step covered two libraries which are libXdamage and libXfixes.

In next step, we will install pango, libXrandr, libXcursor, libcups.(libcups.so.2 is provided by package cups-libs, see this thread)

yum install -y pango pango pango-devel libXrandr libXrandr-devel libXcursor libXcursor-devel cups-libs

You can check the missing libraries at this step with ldd command (ldd ~/.cache/Cypress/3.0.1/Cypress/Cypress | grep 'not found'). But I will just move forward to target libXss. libXss is X11 Screen Saver extension library which is available for rpm based system under the different name libXScrnSaver. This we need to install from centos mirror. To install libXss,

rpm -ivh http://mirror.centos.org/centos/6/os/x86_64/Packages/libXScrnSaver-1.2.2-2.el6.x86_64.rpm

To install atk,

rpm -ivh http://mirror.centos.org/centos/6/os/x86_64/Packages/atk-1.30.0-1.el6.x86_64.rpm # atk rpm -ivh http://mirror.centos.org/centos/6/os/x86_64/Packages/atk-devel-1.30.0-1.el6.x86_64.rpm # atk-devel

Now, we only have to take care of gtk, gdk, gdk-pixbuf, gconf as per the following output:

$ ldd ~/.cache/Cypress/3.0.1/Cypress/Cypress | grep 'not found' libgtk-x11-2.0.so.0 => not found libgdk-x11-2.0.so.0 => not found libgdk_pixbuf-2.0.so.0 => not found libgconf-2.so.4 => not found

Before we move ahead, we need to install gcc program to compile the above missing libraries, and we can install those later.

yum install -y gcc

Now, to compile gtk, you need to have other tools and libraries installed on your system, refer this page.

So, first we install gconf (pkgconfig) with its dependencies:

# dependencies yum install -y libIDL libIDL-devel # orbit required these libs rpm -ivh http://mirror.centos.org/centos/6/os/x86_64/Packages/ORBit2-2.14.17-6.el6_8.x86_64.rpm yum install -y gtk-doc indent # orbit-devel required thses libs rpm -ivh http://mirror.centos.org/centos/6/os/x86_64/Packages/ORBit2-devel-2.14.17-6.el6_8.x86_64.rpm yum install -y libxml2 libxml2-devel dbus dbus-devel dbus-glib dbus-glib-devel intltool # these libs needs to be installed before compiling gconf # install gconf from tar cd /tmp wget https://download.gnome.org/sources/GConf/2.32/GConf-2.32.4.tar.bz2 tar -jxvf GConf-2.32.4.tar.bz2 cd GConf-2.32.4 ./configure && make make install

To install gdk-pixbuf with it’s dependencies(libjpeg, libtiff):

# dependencies yum install -y libtiff-devel libjpeg-devel # install gdk-pixbuf from tar cd /tmp wget https://download.gnome.org/sources/gdk-pixbuf/2.24/gdk-pixbuf-2.24.0.tar.bz2 tar -jxvf gdk-pixbuf-2.24.0.tar.bz2 cd gdk-pixbuf-2.24.0 ./configure && make make install

And now at the final step of gtk+ installation,

# dependencies yum install -y libXcomposite libXcomposite-devel

cd /tmp wget https://download.gnome.org/sources/gtk+/2.24/gtk+-2.24.0.tar.bz2 tar -jxvf gtk+-2.24.0.tar.bz2 cd gtk+-2.24.0 # gconf installation path -> PKG_CONFIG_PATH PKG_CONFIG_PATH=/usr/local/lib/pkgconfig ./configure make # this may take a while 🙂 🙂 make install

Also read: Handling NULL Values in MySQL with Go: A Comprehensive Guide

Linking

Now, let’s link the four missing libraries to pre-built Cypress,

cd ~/.cache/Cypress/3.0.1/Cypressln -PL /usr/local/lib/libgconf-2.so.4 ln -PL /usr/local/lib/libgtk-x11-2.0.so.0 ln -PL /usr/local/lib/libgdk-x11-2.0.so.0 ln -PL /usr/local/lib/libgdk_pixbuf-2.0.so.0

and now let’s check if any dependency is missing,

$ ldd Cypress | grep 'not found'

if you see no output then it just worked, Yay!

Verification

Now, Let’s verify that cypress is working or not. First, start the server from the directory of cypress-example-kitchensink with command npm start. From another ssh session, go to the directory cypress-example-kitchensink and hit the command cypress run. You should see the output as per the following image nearly at the end of the test.

Cypress kitchen sink example test

Also read: Mastering MySQL JSON Data Type with Go: Solutions to Common Challenges

Automation

I already made a script to automate these installation steps and here it is:

cypress tool dependencies installation script

Put proper version in CYPRESS_EXECUTABLE_FOLDER in above script! If you’re using custom location using CYPRESS_CACHE_FOLDER then please update the variable CYPRESS_EXECUTABLE_FOLDER path value according to it.

I hope sharing this would help so that someone does not have to search and go through the dependencies installation steps. Thanks!

Add this to the end – Also read: Efficient Frontend UI Testing with Cypress

Sudip Raval

Full Stack Software Engineer [Python | Django | JavaScript | Docker] (7+ years) working with Aubergine Solutions Pvt. Ltd. Experienced in web application development. Strong hand on Python, Golang, JavaScript programming languages and Django, VueJS frameworks.

Install cypress.io dependencies on Amazon Linux AMI ec2 instance

SIDE NOTE

Linking

Verification

Automation

I hope sharing this would help so that someone does not have to search and go through the dependencies installation steps. Thanks!

Want to build remarkable products together?