Testing Views in Multiple Browsers

Clayton Flesher

August 10, 2015

I was recently tasked with writing the views for our tags on the Ruby Monday group’s blog. The code is standard HTML with ERB for the portions that need to be dynamically generated from Ruby.

When I was learning HTML, CSS and JavaScript, it was always stressed to me that I needed to be sure and test all of my views out in multiple browsers, to make sure everything was displaying properly, and nothing looked weird.

Unfortunately, I forgot this lesson when using ERB, which generates HTML from Ruby code, and it bit me.

One thing I was trying to get working was a tag button that, when a user clicked on it, redirected them to a list of posts that had that particular tag. The button already existed in the code, and it displayed the right name for the tag, but nobody had pointed it to a url yet.

<buttonclass="btn btn-default btn-sm">
	<%= tag.content %>
</button>

I set about embedding an ERB statement inside of the existing button’s HTML.

<buttonclass="btn btn-default btn-sm">
	<%= link_to tag.content, tag_path(tag) %>
</button>

This was my first mistake.

In retrospect, I don’t have a good explanation for why I tried to embed the ERB statement inside of the HTML code instead of putting the class description inside of the ERB statement. Chock it up to me being a Newbie, I guess.

I was always letting my Rails server send me to my default browser, Firefox, when I wanted to run the code and see how it was looking.

This was my second mistake, one that I shouldn’t have made.

Fortunately, I got lucky. The code didn’t work for me. I would click the button, and nothing would happen. As far as I could tell, it was correct, so I brought the line of code to the Ruby-Monday slack channel.

This particular slack channel group is pretty active, and while all of us are Ruby newbies by most Ruby and Rails developer standards, the kinds of problems that one newbie runs into, can often be solved by someone with just a little more experience who can point them in the right direction.

When I brought the line of code to the chat, Farish Kashfinejad, told me it worked fine for him.

We went back and forth for a while, but I wasn’t making any progress on getting the button to work, so I suggested we get on a Google Hangout and look at each other’s code and see if we were missing something.

He had the latest version of my Github repository, and we were running the same code on the server. It had to be something else.

Sure enough, Farish was testing his code in Chrome, and I was on Firefox. As soon as I opened up the page on Chrome, the button started working for me as well.

A breakthrough!

But this wouldn’t do. Too many people use Firefox for this to be a viable solution. After some quick Google-fu, Farish was able to spot the issue. It was the ERB being wrapped by a button.

This is what we wanted.

<%= link_to tag.content, tag_path(tag), class:"btn btn-default btn-sm" %>

In the end, it rendered the image the same on all of the browsers, but when I clicked on it in Firefox, it took me where I needed to go.

I was actually lucky that the bug showed up on me immediately, and not after the code had gone to production. If I’d been testing the button in Chrome, IE or Safari, it would have worked fine and I’d have missed it entirely.

Lesson: Always test your views in multiple browsers.

For using browsers that aren’t available on your system, I suggest trying out something like Virtual Box.