testing Archives - CSS-Tricks

The Three Types of Performance Testing

# October 29, 2018 By Robin Rendle

We've been covering performance quite a bit — not just recently, but throughout the course of the year. Now, Harry Roberts weighs in by identifying three types of ways performance can be tested.

Of particular note is the first type of testing:

The first kind of testing a team should carry out is Proactive testing: this is very intentional and deliberate, and is an active attempt to identify performance issues.

This takes the form of developers assessing the performance impact of every piece of work they do as they’re doing it. The idea here is that we spot the problem before it becomes problematic. Prevention, after all, is cheaper than the cure. Capturing performance issues at this stage is much more preferable to spotting them after they’ve gone live.

I think about this type of performance all the time when I’m working on a team, although I’ve never had a name for it.

I guess what I’m always thinking about is how can we introduce front-end engineers into the design process as early as possible? I’ve found that the final product is much more performant in when front-end engineers and designers brainstorm solutions together. Perhaps collaborating on a performance checklist is a good place to start?

Continuous Integration: The What, Why and How

# October 25, 2018 By Jeff Wainwright

Not long ago, I had a novice understanding of Continuous Integration (CI) and thought it seemed like an extra process that forces engineers to do extra work on already large projects. My team began to implement CI into projects and, after some hands-on experience, I realized its great benefits, not only to the company, but to me, an engineer! In this post, I will describe CI, the benefits I’ve discovered, and how to implement it for free, and fast.

(more…)

continuous integration testing unit tests

Demystifying JavaScript Testing

# October 24, 2018 By Kent C. Dodds

Many people have messaged me, confused about where to get started with testing. Just like everything else in software, we work hard to build abstractions to make our jobs easier. But that amount of abstraction evolves over time, until the only ones who really understand it are the ones who built the abstraction in the first place. Everyone else is left with taking the terms, APIs, and tools at face value and struggling to make things work.

One thing I believe about abstraction in code is that the abstraction is not magic — it’s code. Another I thing I believe about abstraction in code is that it’s easier to learn by doing.

(more…)

continuous integration JavaScript testing

Introducing GitHub Actions

# October 17, 2018 By Sarah Drasner

It’s a common situation: you create a site and it’s ready to go. It’s all on GitHub. But you’re not really done. You need to set up deployment. You need to set up a process that runs your tests for you and you're not manually running commands all the time. Ideally, every time you push to master, everything runs for you: the tests, the deployment... all in one place.

Previously, there were only few options here that could help with that. You could piece together other services, set them up, and integrate them with GitHub. You could also write post-commit hooks, which also help.

But now, enter GitHub Actions.

(more…)

containers deployment docker github github actions testing

An Intro to Web Site Testing with Cypress

# August 29, 2018 By Devon Campbell

End-to-end testing is awesome because it mirrors the user’s experience. Where you might need a ton of unit tests to get good coverage (the kind where you test that a function returns a value you expect), you can write a single end-to-end test that acts like a real human as it tests several pieces of your app at once. It’s a very economical way of testing your app.

Cypress is a new-ish test runner with some features that take some of the friction out of end-to-end testing. It sports the ability to automatically wait for elements (if you try to grab onto an element it can’t find), wait for Ajax requests, great visibility into your test outcomes, and an easy-to-use API.

(more…)

testing

A Favor for Your Future Self

# December 8, 2016 By Chris Coyier

Alicia Sedlock, on removing a large section of a website:

... it’s the ultimate “I really hope this doesn’t break something else” situation. It was a stressful and tedious effort of triple checking that the things we were removing weren’t dependencies elsewhere. To be honest, we wouldn’t have been able to do this with any amount of success or confidence without our test suite.

Tests don't just help you when you change code or write new code, then help when you remove it, too. Seems to me testing has settled into the industry mindset as crucially important. As the year closes, I imagine managers worldwide are considering employees ability to write tests in their reviews.

This also reminds me of our unending quest to define "front-end development", a job description with skill requirements that get broader and broader every day. Testing is a unique skillset with its own learning curve. But if JavaScript is squarely in the front-end bucket, shouldn't testing that JavaScript also be?

This is also your yearly reminder that 24 ways has kicked off.

24 ways testing

An Intro to Monkey Testing with Gremlins.js

# November 14, 2016 By Alicia Sedlock

A common idiom in our industry is, "You never can predict how the user will use your product once they get it in their hands." If you've ever watched a stakeholder use a website or web application for the first time, you may know this firsthand. I can't count the number of times I've seen a user seemingly forget how to use websites on a mobile device, or try to use it in a way that makes you think, "But no one would actually do that in real life!"

(more…)

forms testing

Visual Regression Testing with PhantomCSS

# November 17, 2015 By Jon Bellah

The following is a guest post by Jon Bellah, a Lead Front End Engineer at 10up. Jon reached out to us about writing on the idea of visual regression testing, which is a form of CSS testing (i.e. making sure you don't screw up your site by accident). I thought the use-case was particularly interesting: re-architecting CSS (converting to Sass, splitting up files, etc) and making sure there wasn't regressions during that process. Here Jon will go into all that as well as some of the challenges of visual testing (e.g. changing content changes visual result) with clever workarounds.

(more…)

css testing phantomcss testing