Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ask HN: What do you use to test Frontend code?

news.ycombinator.com

Post reply on HN
Print view View original

21–30 of 47 posts

Re: Ask HN: What do you use to test Frontend code?

#21

Post by MartinCron »

ByteMuse wrote: post #16

Some things require manual testing. Animations and a lot of visual stuff needs to be analyzed holistically; there are sometimes visual quirks that are near impossible to write tests for but can easily be detected from someone quickly viewing the site. Have different environments set up. After every big push, run through a simple user flow to make sure what the user will actually see is what you intended.

After every big push...

One way that I minimize my front-end testing liability is to do as few "big" pushes as I can. The safest change to make is the smallest change possible.

Re: Ask HN: What do you use to test Frontend code?

#22

Post by MartinCron »

riffraff wrote: post #12

on a side note, do you people test graphics? I mean, it's kind of easy to say "I get a div #foo". But how do you check if it has the right shade of $color and a rounded corner and the text content is not overflowing the containing box? I live in constant worry of changing css and totally screwing up a completely unrelated bit of the web app, and the usual thing I get told is "well, it's very fast to check if it still…

I live in constant worry of changing css and totally screwing up a completely unrelated bit of the web app

I understand this worry, but it makes me think that it may be a design problem with the CSS. Unrelated bits shouldn't be using the same CSS, related bits should probably change together.

In a more practical note, I have created selenium tests which capture screenshots and then saved those screenshots as artifacts in the CI (TeamCity) system. Having a human look at a bunch of static images makes for a faster and less error-prone sanity test to see if things are totally broken.

Re: Ask HN: What do you use to test Frontend code?

#23

Post by hopeless »

riffraff wrote: post #12

on a side note, do you people test graphics? I mean, it's kind of easy to say "I get a div #foo". But how do you check if it has the right shade of $color and a rounded corner and the text content is not overflowing the containing box? I live in constant worry of changing css and totally screwing up a completely unrelated bit of the web app, and the usual thing I get told is "well, it's very fast to check if it still…

Asking a computer to check aesthetics is start of your descent into madness. Use Selenium to check that links do what you expect, elements are loaded etc. Don't use it to check if a button graphic has the right icon loaded.

Computers are great at functional testing but you still a Mk1 eyeball to check aesthetics. Luckily, functionality is what your customers will really care about. No one will shout at you if an element is misaligned for a while before you catch it with manual testing

Re: Ask HN: What do you use to test Frontend code?

#24

Post by hopeless »

otaku_coder wrote: post #20
outside1234 wrote: post #17

Earlier quoted context omitted.

I'm not sure that it isn't. I'm worried about the maintenance costs of keeping it up to date - but maybe that is the price you pay.

If you're worried about keeping it up to date, why not outsource the test runner to something like saucelabs?

Sauce is a useful service but it doesn't address the test maintenance problem... And it is a big concern.

My advice: Do NOT use the Selenium IDE. write your own framework, using Selenium, which isolates changes when they occur. If someone changes the login page, you only need to change a login method in your test suite not all 200 rest cases! Look up the Page Objects pattern as one way of doing this

Re: Ask HN: What do you use to test Frontend code?

#26

Post by troels »

qixxiq wrote: post #15

I use a custom selenium test runner that runs them in parallel (php). I plan on neatening it up and releasing it at some point if theres interest. It also has a 'live mode' which is useful for writing up new tests. It basically follows a file and whenever there is a change it begins running the commands from that line onwards again. If it hits an exception it'll pause there and wait for you to fix the broken test/sit…

I'd be interested in seeing that. Oh, and I'd rather see a mess soon, than wait for the neated-up version.

Re: Ask HN: What do you use to test Frontend code?

#27

Post by notJim »

otaku_coder wrote: post #20
outside1234 wrote: post #17

Earlier quoted context omitted.

I'm not sure that it isn't. I'm worried about the maintenance costs of keeping it up to date - but maybe that is the price you pay.

If you're worried about keeping it up to date, why not outsource the test runner to something like saucelabs?

I believe outside1234 is referring to the maintenance cost of keeping the tests up to date.

Re: Ask HN: What do you use to test Frontend code?

#28

Post by sgrove »

I always feel frustration at this question, I can't believe that sauce labs hasn't taken off. Use capybara as the driver layer, and a proper test framework that separates the different layers, and sauce labs to hit any browser matrix you want. Tie it into a CI system and never worry about this again - it's a solved problem, and it was solved by Sauce Labs.

disclaimer: I used to work there, and put my blood, sweat, and tears into building it out just for situations like this.

Re: Ask HN: What do you use to test Frontend code?

#29

Post by tdavis »

For Javascript testing, I really like JSTestDriver for automation and Sinon for mocking/stubbing.

I found bulky solutions like Selenium to be somewhat hit-or-miss and overkill for most tasks. It's very rare that with proper unit testing I really need a whole additional layer just to click around the site and make sure stuff is working as expected. Maybe some basic sanity checking, but it's really not my preferred way to think about testing--which of course is just a personal preference.

Post reply on HN