The internet with Cypress: Real-World Scenarios from Heroku's 'The Internet” Playground

I recently went to chatGPT and asked what some good automation exercises there could be, after a while working on the same system, or providing automation for just a specific type of user flows, we can end up forgetting some things, so I asked about some sites to practice and I found the-internet.
And as rudimentary as the site might look, they still offer a place for you to try some automation and for the moment, it was all I needed. I put some time and tackled a few classic web challenges using Cypress.
So, without further ado, let’s dive into some scenarios I automated, covering everything from buttons that come and go like magic, weird drag and drops, file-related automation and some quick Shadow DOM work!

1. Drag and Drop: If you’ve ever tried to automate drag-and-drop, you know that it's never as straightforward as it seems. While Cypress has native support for certain interactions (and I did try that lol), it still takes some creativity to get the drag-and-drop test just right here.

In this case, I experimented with a custom dragAndDrop command, using trigger('mousedown'), trigger('dragover'), and trigger('mouseup'). Due to the way that the functionality was implemented on this site, I had to dig a little deeper to get this tests working, but it seems like for most of modern apps, the cypress plugin should be enough (thankfully).

1. Add/Remove Elements:

The “Add Element” button in this exercise is simple in theory, but it's funny how this playground just tries to mess with your expectations sometimes, haha. Click it once, and then... A delete button appears (which is not super intuitive but oh well, you just have to roll with it). The trick is to make sure we handle the add-remove dance in a way that’s stable and repeatable in our tests. With Cypress, we check if the button appears, add a few more, and then remove them one by one, ensuring the sequence doesn’t glitch.

Pro Tip:
Tracking elements that appear and disappear can be tricky, but Cypress .should('exist') and .should('not.exist') assertions handle this well. Plus, you get a sweet visual confirmation each time.

1. Dynamic Content:

I think that this is the simpliest of the examples on this article, but it can still be interesting, the idea was just to create tests that would make sure the format of the content would be a constant, even if it's content would always change... can still be useful for learning though.

Cypress can confirm elements load as expected without getting too picky about the actual content, which keeps the tests resilient.

1. Dynamic Controls:

For this one controls like checkboxes and buttons appear or disappear based on user interaction. Some require waiting for a loading indicator to vanish. Here, Cypress’s cy.wait and .should('be.visible') are key.

Quick Tip:

Instead of hardcoded waits, use assertions like .should('exist') and .should('be.disabled') to react to the page’s status. This makes tests more robust and adaptable.

1. File Download:

Downloading a file might sound simple until you have to prove it actually happened. With Cypress there are different things we can do to make sure a file was actually Downloaded.

We can do different things to make sure that a download went through, for this application, I just made sure that we had the file on the download folder after clicking on the link. It was very simple, once the file is there, the test passes automatically. Other strategies could be applied such as as using cy.intercept to verify that a download request was fired for example.

1. File Upload: Just like file download, file upload is surprisingly smooth with Cypress.

For this type of scenario you could use something like cypress-file-upload
which is a very good and useful plugin, and confirm that the file is processed by the app.

On my example, all that was done was through the .selectFile command and there is a way to just to do it without even sending a actual file, just using Cypress.Buffer should do the trick (you can see the implementation inside the repository linked below).

And this worked for uploads done through button clicking as well as for drag and drop uploads, extremely simple... thanks cypress ?.

1. Shadow DOM:

The mystery of the Shadow DOM is that elements are like a secret inside the main DOM. They’re tucked away and don’t follow regular CSS visibility rules, which can be a bit tricky depending on how you need to run automations on them. Thankfully, Cypress supports the shadow command to pierce this veil and find those hidden elements.

For these tests, I used cy.get('element').shadow() to access elements within the Shadow DOM, and then, no more issues or difficulties, you can access and do assertions on the elements as you would with regular ones.

---

And that's it for now.. just quick 6 examples on how we can use Cypress to deal with some basic browser automation usage, and how to leverage it to make your life easier when dealing with such cases.

Ready to Try It?

If you’re interested in trying these tests or adapting them for your projects, I’ve made the code available on my GitHub repo. The test suites are very light so there shouldn't be too many doubt points on it and we have GitHub Actions flow, that you can use so you can see how it all works in action! Thank you, see you next time!

The above is the detailed content of The internet with Cypress: Real-World Scenarios from Heroku's 'The Internet” Playground. For more information, please follow other related articles on the PHP Chinese website!