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
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    :valid, :invalid, and :required CSS Pseudo Classes

    Let's be honest, form validation with JavaScript can be a real bitch.  On a real basic level, however, it's not that bad.  HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...

  • By
    Elegant Overflow with CSS Ellipsis

    Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...

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!