Live data from Hacker News

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

news.ycombinator.com

41–47 of 47 posts

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

#41

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 elem…

Side note -- I definitely agree about not using Selenium to check for alignment, images loading, etc..

But... it's pretty cool to have a single Selenium test that does nothing but zip through your site and show all of the unique views at rapid fire speed, so as soon as the page is loaded it has already filled in any relevant form and is loading the next page.

Make sure someone with good concentration sits and watches that test run once in a while; anything seriously wrong will pop out, and they can watch it zip along while taking a coffee break.

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

#42
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 as well.

I wrote a custom test runner as well, though not addressing the same issues; mine is specifically for non automated testing. It's a Java GUI that lets you choose from all our existing tests, tinker with parameters, and run the test live in your own browser against our test server with a few extras (like stepping through the test, go/pause, run all tests in sequence, etc.).

It's partly to let our CEO really interact with our testing -- i.e, see what's being tested, and rapidly explore the site as a whole -- but also is pretty useful as a robot; i.e., when I want to register three new users to try something out, I don't have to do it manually.

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

#43

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…

Why is unit testing useful, to you? I have often heard two justifications for testing: (a) correctness and (b) developer speed. Phrasing (a) differently, is X functioning as intended? Phrasing (b) differently, how quickly can I make a change to Y, and if I change Y, how long will it take to manually check Y (with a browser, etc.), how likely am I to introduce a bug (leading to extra development time) and/or will I ha…

I'm putting extra work into unit and UI testing to build a safety net so I can convince my CEO & other developers to let me carry out serious refactorings on our code, like deleting large chunks that aren't used anymore, and changing objects that are used pervasively.

We also have an increasingly broad application; as we add new features, I (as a developer) find that I don't visit older parts of the app, though of course the users still need them to work. Particularly when refactoring basic back end stuff that's called from lots of places, it's too tedious to manually track down every part of the UI that would need to be retested due to a given change (and then test it manually... ugh).

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

#44

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 artifact…

I agree it may be a design problem with the CSS, I agree.

But my point is exactly that: I can't just go in and _improve the code_ (extracting classes, rewriting it in less/sass or whatever) because to verify the changes do not mess up the UI requires clicking around many pages in half a dozen browsers in three OSes.

And thank you very much for the practical note, it's an interesting idea!

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

#45

Earlier quoted context omitted.

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 artifact…

I agree it may be a design problem with the CSS, I agree. But my point is exactly that: I can't just go in and _improve the code_ (extracting classes, rewriting it in less/sass or whatever) because to verify the changes do not mess up the UI requires clicking around many pages in half a dozen browsers in three OSes. And thank you very much for the practical note, it's an interesting idea!

You're in the catch-22 of being unable to write tests without refactoring, and unable to refactor without test coverage. I get it.

I hope the automated screenshot idea helps. I personally found it more useful in theory than in practice, but I wasn't doing a lot of UI polish work.

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

#46

Earlier quoted context omitted.

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 artifact…

I agree it may be a design problem with the CSS, I agree. But my point is exactly that: I can't just go in and _improve the code_ (extracting classes, rewriting it in less/sass or whatever) because to verify the changes do not mess up the UI requires clicking around many pages in half a dozen browsers in three OSes. And thank you very much for the practical note, it's an interesting idea!

One other practical note, you can create a single (test) page that showcases all of the visual styles currently in use, so there is one page to check manually.

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

#47
Hmmm, I'm using Splinter (http://splinter.cobrateam.info/) to do tests. It lets you automate browser actions and much more, like execute javascript, find elements returned via AJAX, interact with forms, links and more... it has drivers for chrome, firefox... You shold to test it :)
Post reply on HN