Breaking Down Barriers to Front-End Testing

Sergio Arbeo
Jean DerGurahian

Content Marketing Analyst

Jean DerGurahian

How do principles help or hinder the testing process of a web development project? Engineer Sergio Arbeo will address that question during his FrontFest 19 presentation, laying out some best practices and test approaches that have worked for him. Read his thoughts on testing principles and trends in snapshot testing below, and check out his presentation in Madrid.

What are some of the issues that go into front-end testing?

There are lots! Many application projects separate the back-end and front-end development work. But if you have your backend and frontend as separate projects, how do you feed data for testing? VCR? Mocks? Setting the back-end project just for testing? Developing a meaningful web experience requires us to think about all facets of testing for both the backend and frontend.

How do you test complex interactions? And animations? And old devices? And syncing behaviour in service workers? If you are using Puppeteer, you have some cool features, but other tests are harder to write, like testing a function that returns a symbol or any other realm-specific value.

What are the principles you apply to testing? Why do you try to be flexible with them?

I try to have as few principles as possible, if we understand principle as axioms or fundamental truths that cannot be proven. My only principle is that tests are my safety net; they are there to help me prevent regressions, or fix them should they occur. All my testing practices come from that.

A software test needs to be easily readable. Otherwise, it would be telling me that something is failing, but just knowing that would not help with the debugging process.

A test being readable also would span a few more of my practices, which include using white lines for separating paragraphs, not adding too much logic in before hooks, or trying not to use different methods for the same purpose.

And the list goes on and on and on, due to the complexities of digital product development.

I’m flexible with testing practices, as long as they contribute to the main goal of having a great safety net. I think my turning-30 crisis made me have fewer strong opinions (as long as they could not be linted / tested automatically).

What programs (if any) do you use for testing?

Just an editor and Chrome when testing on my day to day work.

What upcoming trends will impact how you work?

I hope we can see a mature usage for snapshot testing, which uses snapshots of the HTML structure and compares it to a previous, kept copy - something I discuss in my talk.

Visual Testing is what I think will have the most impact not only on my work, but on my UXD colleagues’ work, as well. We have, already, good tools out there, but some libraries are pushing the boundaries, giving you the option to interact with the snapshot and not just look at a static image.

Puppeteer has good traction, too, and though it makes testing simple and convenient in some ways, a few other tests are harder to write given your tests run in a different realm from where they are written.

A final tool I’ll be keeping an eye on is cypress, which for the small time I spent giving it a go, looks like a modern Selenium.

What other topics/sessions are you looking forward to at FrontFest?

All of them! Really, FrontFest has some really good web development talks this year. I cannot choose between Service Workers, Web Components, routing, diversity in tech, performant animations, and Custom Properties. They all are changing how we make and understand the web user experience today, and will certainly keep improving it in the following years. If I had to choose one, I’d say James Heda Weng’s talk about improving communication between design and engineering, a key issue DockYard focuses on as well, by having a strong UXD team.

DockYard is a digital product agency offering exceptional user experience, design, full stack engineering, web app development, custom software, Ember, Elixir, and Phoenix services, consulting, and training.

Newsletter

Stay in the Know

Get the latest news and insights on Elixir, Phoenix, machine learning, product strategy, and more—delivered straight to your inbox.

Narwin holding a press release sheet while opening the DockYard brand kit box