Why I COULDN’T Integrate Cypress End-To-End Testing Into My Dissertation Project!

Introduction:

This week’s blog post highlights a problem that I ran into while working on my dissertation project: End to End Testing (E2E)!

Read on to learn about the problems I faced and how I attempted to solve them.

As always, please make sure to applaud, comment and share with your friends.

Happy Reading!

Here’s What I WANTED to do:

So if you’ve been reading my recent blog posts, you’ll be aware that I was building a Next JS web app as part of my dissertation project. In order to maintain the quality of the codebase, I wanted to incorporate E2E testing into the development process in order to verify the validity of the application’s features.

For those that don’t know, Cypress E2E testing essentially simulates the actions that a user would take (even visibly showing these actions as they take place).

The problem(s):

Time was a minor concern however that wasn’t the reason for making this blog post.

The major problem was the fact that my authentication library (Clerk Auth with Google) was not working particularly well with Cypress. I was using middleware technology to redirect authenticated/unauthenticated users accordingly.

When I first started to create Cypress tests, Cypress would be unauthenticated and would hit the middleware (demanding Cypress to sign in). The problem here is that a standard user would just click on the field and sign in with their Google account. Unfortunately, Cypress requires Google Authentication to be handled programmatically as opposed to using HTML selectors for accessing elements.

How I TRIED to Get Around the Problem:

Attempt 1: Modifying Clerk’s ‘Email and Password’ Example:

Clerk provided an example which incorporated Cypress however this was unsuccessful.

Attempt 2: Using Cypress’ ‘Google Auth’ Example:

This example differed slightly in the sense that it involved experimenting with Google Cloud Platform (GCP), attempting to generate an access token and passing that into Cypress.

I got exposure to the Google Cloud Playground.

Even though this approach was unsuccessful, it was a valuable experience.

Attempt 3: Using Clerk Dashboard’s ‘Custom Credentials’ Example:

Clerk had an interesting feature around credentialess sign in. This would’ve been perfect as a way of ‘bypassing authentication’ however it was unsuccessful

Attempt 4: Reaching Out to the Clerk Development Team:

My last attempt was to reach out to Clerk and see if they had an idea on how I could approach this block of work.

The screenshot below outlines my attempts to reach out to Clerk (albeit unsuccessful).

Conclusion/Key Points:

Perhaps my choice in authentication library prevented me from being able to incorporate E2E tests. Other alternatives include Firebase or Next Auth.

Personally I believe that E2E tests should complement a system rather than dictating any decisions made.

If one day Clerk are able to provide Google Authentication support with Cypress then I’d be more than happy to add E2E tests to this project.

Final Things:

As always, thank you for taking the time to read this article.

All my links are here.