Get Browser Information with Intern

By  on  

You know how you can't remember something your spouse feels is really important but you can remember every funny line from that movie you saw when you were 17?  That's how I feel after months of writing selenium tests using the Intern framework -- I've forgotten lots of important front-end stuff but I've uncovered loads of selenium issues and techniques to hack around them.

I initially wrote my tests using Firefox as the test browser.  Then I opened up my testing to Chrome and needed to adjust a whole bunch of stuff because Chrome doesn't reliably do things like Firefox, like element `click` vs. `enter` key press.  And don't ask me about concurrency issues.  Then today I had the bright idea of adding Safari to the mix.  In a word....f*ck.  A whole new world of issues cropped up.

One issue that Selenium + Safari has (one of dozens) is history / URL issues.  After doing loads of research and implementing every hack I could think of, I had this moment:

Fuck It

If there's a Selenium issue in a given browser that makes it impossible for a test to complete properly, there's no point in fighting it -- this case calls for simply passing the test instead of dealing with the annoyance of seeing a failure due to Selenium error.   But how do you get browser information within a test?


// From within a test function
console.log(this.remote.session.capabilities);

{
  'webdriver.remote.sessionid': 'f4dffffc-8d40-4e21-a862-459109ffabfc',
  browserName: 'safari',
  takesScreenshot: true,
  javascriptEnabled: true,
  version: '8.0.8',
  cssSelectorsEnabled: true,
  platform: 'MAC',
  secureSsl: true,
  remoteFiles: true,
  nativeEvents: false,
  rotatable: false,
  locationContextEnabled: false,
  webStorageEnabled: false,
  applicationCacheEnabled: false,
  supportsNavigationDataUris: true,
  supportsCssTransforms: true,
  supportsExecuteAsync: true,
  mouseEnabled: true,
  touchEnabled: false,
  dynamicViewport: true,
  shortcutKey: '',
  brokenDeleteCookie: false,
  brokenExecuteElementReturn: false,
  brokenExecuteUndefinedReturn: false,
  brokenElementDisplayedOpacity: false,
  brokenElementDisplayedOffscreen: false,
  brokenSubmitElement: true,
  brokenWindowSwitch: true,
  brokenDoubleClick: false,
  brokenCssTransformedSize: true,
  fixedLogTypes: false,
  brokenHtmlTagName: false,
  brokenNullGetSpecAttribute: false,
  brokenNavigation: true,
  brokenMouseEvents: true,
  brokenWindowPosition: true,
  brokenSendKeys: true,
  brokenCookies: true 
}

The session object on the remote provides information about the browser session, including the name (most important) as well as fixes provided by Intern.

In an ideal world you can write all of your Selenium tests in one format and it works within each browser....but we don't live in an ideal world, the same way we need browser hacks within our client side JavaScript.  Being able to get browser name and other information within a test, however, is just another super useful bit of information exposed by Intern!

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

  • By
    Image Reflection with jQuery and MooTools

    One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your...

Discussion

  1. Pablo

    Nice to hear that I’m not the only one that feels that way at times. Make sure you get back to delivering awesome content in due time though! :D

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!