Group-income-simple: Cypress - Bypass UI in repetitive flows

[sandrina-p]

Problem

As we have been building up the tests on Cypress, there are 3 flows that are used a lot of times:

• Sign In
• Log in
• Group Creation

Each one of the flows is "quick" when done just once. However, when done several times it starts to take too much time and it's tedious to watch. For example, settings up a group of 4 members, takes ~15 seconds. And a group with 20 members with income details takes ~70 seconds.

Solution

Implement a solution that bypasses the UI on the flows mentioned above.

[sandrina-p]

@taoeffect do you have any idea how we could approach this? The way I see it, we don't have an actual "REST API" to do the following:

cy.request('POST', '/login', { username, password })

But maybe we could create something minimal that replicates it? This would save us a LOT of time on tests. The current tests are taking ~2:15m and it will increase as we add more tests. With this methodology, we could cut it down by 25% easily.

[taoeffect]

@sandrina-p I'm sure something can be figured out, but it would be different from the example you gave.

The first thing to do is to isolate and identify exactly what the bottleneck is. Does it have something to do with UI animations/transitions? Identify exactly what's slowing things down. Then implement a way of logging in that doesn't use that.

The Cypress suggestions are irrelevant to our app, since the login all happens locally in the client, not remotely on the server.

[sandrina-p]

The first thing to do is to isolate and identify exactly what the bottleneck is.

We already disabled all animations during the hackathon.
The bottleneck is how the UI, itself as a UI works. Things take time - to find an element, to type, to click, and so on. One signup + logout takes ~2.5 seconds. If you do it 20 times, it will take at least 50 seconds. There's nothing we can do in terms of UI.

The Cypress suggestions are irrelevant to our app.

No, they are not. They explain why this is happening and how we can solve it. A "typical" server API might not be our exact solution, but we can try something similar.
My idea: Create a specific client page for this. /bypass-ui this would be a page that lists the available commands (queries) we can use to perform common actions/flows without using directly the UI. Probably this would be a reflection of our own Cypress commands: For example:

- signup
queries:
 - username
 - email

- create-group
queries: name, income, etc....

- ...

And then we could use it on cypress as:

cy.visit(`/bypass-ui?action=signup&username=user1&[email protected]`)

The page loads, and performs immediately the desired action/flow (a.k.a a bunch of sbp calls) based on the url queries. There would be no wasted time with UI (find the 1st input, typing username, find the 2nd input, typing password, find submit button, click it.)

Just to clarify, we would still do the signup or any other flow using the UI to make sure it works, as we have been doing... but only once! All the other times, we would use this /bypass-ui url.

What do you think?

[sandrina-p]

So, I built a POC for this. Signup 10 users, here's the test results:

• Using the UI: 21.88s, 221 cy steps
• Bypassing the UI 5.47s, 71 cy steps

When accessing the page, you'll see something like this:

Bypassing the UI was 75% faster, and this is just signup, imagine how fast are more complex flows, like creating a group or update the income details.

[pieer]

Nice!

[taoeffect]

@sandrina-p

What do you think?

I think you've come up with a brilliant idea! ^_^

Fantastic work, very impressive. 💪

[sandrina-p]

Awesome you liked it! So, @taoeffect can I work on this issue before #663?

[taoeffect]

@sandrina-p go for it! 😄