My Cypress Journey (so far…)

I’m going to share my experience in picking up the Cypress testing tool, how I have shared it and the challenges that have been faced and that I’m yet to face. This is coming from someone who is not comfortable with coding, and has struggled in the past with getting going with automated test frameworks and tools.

This is my learning experience, including what I used in terms of learning materials, external integration providers etc.

I’m not in the employee of Browserstack, Cypress or Applitools . Other methods and sites are out there and may work better for you.

First thing to cover is what is Cypress?

It’s a tool to help in testing web applications and can be used across different browsers installed on your machine (Chrome, Edge & Firefox). Except Safari, more on that challenge later.

Cypress is a purely JavaScript-based front-end testing tool built for the modern web. It aims to address the pain points developers or QA engineers face while testing an application. Cypress is a more developer-friendly tool that uses a unique DOM manipulation technique and operates directly in the browser. Cypress also provides a unique interactive test runner in which it executes all commands.

https://www.browserstack.com/guide/cypress-vs-selenium

Why did I choose it?

My first sight of Cypress was at the Ministry of Testing TestBash Mobile 2022 conference. Where a presentation was given on how Cypress can be used to create end to end tests by Rob Richardson.

Given my coding ability I wasn’t so sure how I would get on, it looked quite straight forward to put tests together. I was able to follow what was going on! I could see that it had a potential application for some of the testing that we’re engaged in , in terms of visual verification cross browser. Having already got node installed as a prerequisite. I needed to run the one command to install it;

npm install cypress –save-dev

https://docs.cypress.io/guides/getting-started/installing-cypress#What-you-ll-learn

So I took the plunge!

Getting going.

My first foray was to have a go with the examples that Cypress provided. Visiting a web page and performing an action etc. Things started to click and the exercises were working so I felt I’d be ok to try and create some tests for the app I was testing.

What happened was that in my eagerness to get going I was going to create tests that weren’t the best examples of good practice. They ran and asserted on the right things, they were in hindsight not the most maintainable, they did give me a quick path to proving that this had some value in terms of what I wanted to use the tool for. To drive visual verification tests.

Browserstack Integration in a day and a half!

I wanted to see how Cypress could be leveraged to run cross browser tests without me having to switch browsers locally.
Fortunately Browserstack has integration with Cypress to enable this, which was great fun to try even if it didn’t really work in all scenarios for me (i.e the I need this to run against Safari scenario) .
It was a bit of a celebration as I’ve gone from having nothing to creating tests and integrating them with a service to increase coverage in not much time at all!

Time to learn some best practice.

On having created some tests and feeling pretty good even though they weren’t the best constructed tests, I decided that I needed to learn more and the Test Automation University’s Introduction to Cypress course presented by Gil Tayar felt like a good place to start.
The biggest takeaway from doing that course was my tests whilst I appreciated that they were a bit rough, they weren’t especially maintainable. The introduction of page objects to allow the methods I was writing to be re-used across all the tests made such a difference. I think in retrospect what had thrown me was that these are page objects for methods of interactions not a page selector of an element on a page, defining the mapping.

Applitools eyes fun.

A part of the Introduction to Cypress course was to integrate with Applitools eyes. Here’s where things get really exciting as I was able to solve the Safari issue finally, in that the Applitools eyes integration allows for a browser and screen size to be set that the submitted tests get run against. In theory this’d allow for user without a mac to run a test via the Applitools eyes integration and run tests against installed browsers.

More best practice.

On having done a load of refactoring of my tests to implement the page objects and trying to use better selectors I decided to embark on the Advanced Cypress course presented by Filip Hric. Some of these items like waiting for elements are things that I’d like to revisit I think that I found it beyond what what I needed now to help the teams.

Iterating & Sharing with the team.

Through out the journey I have been sharing videos of the tests I have been creating and sharing with the testing community, which have been well received.

I also needed to figure our how Cypress could work with Iframes. Fortunately I found Marie Drake’s testing-iframes-with-cypress blog post was really useful in helping me figure out how to work around the problem of interacting and asserting on a page that’s external to your app.

I’ve also had some sessions to explain getting set up and the way that the test have been written. In that they are very much a quick approach to getting value for the effort expended rather than a fully considered agnostic test suite. In that the data doesn’t matter.

It’s been a positive experience in sharing my progress, I need to spend the time now in helping my community try it out.

Next steps.

Revisit the topics in the advanced course to see how they can make the tests better, more stable or easier to understand.

I’m going to have to learn JavaScript to be able to write methods to do the things I want the tests to do.

Refactor some of the tests and use better selectors as some of the tests are still a bit naive in what they ask to be clicked on.

Start to get some value from running these tests instead of the manual effort.

Continue to encourage others to create and run tests.

What have I have I learned.

I really need to be able to understand code better to be able to leverage tests.

It’s ok not to know and find out about things.

Sharing progress creates a story to explain the “Why” behind the effort.

It might have been better to fo the introduction course first before writing tests!

Catch you next time.


2 responses to “My Cypress Journey (so far…)”

  1. hmmm… I like this blog better than the first. The first impression was the black background; the different colors that are used to show us a transition from one thought to the next make it a great read. Recommendation. Would have loved an indication as to whether it was a 2 minutes somewhere on the topic beneath the headlines. Great blog. Looking forward to the next.

    Like

    • Hi, Thanks for the comment. The theme was changed recently as an experiment to see if it made any difference to the experience. Looked like it did! All other posts prior to this are historic to this blog post (and the next 7) to come and are not a part of my level 4 challenge. The requirements for the level 4 is that the blog is engaging not that is has to be any particular length or duration. There’s a 2-3 min talk for me to do at the end where I’ll share my thoughts! Thanks fore the feedback and I hope you enjoy the next one.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: