Intern Recorder 2 now supports TypeScript, ES Modules, and Intern 4

Intern Recorder is a Chrome extension that can kickstart the process of creating functional tests for Intern. It was initially released in 2015 users of Intern authored test suites as AMD modules. Intern has changed quite a bit since then; in particular, the standard suite module format has changed from AMD modules to ES Modules and ES5 code has been replaced by ES2015+ and TypeScript. Intern Recorder was due for an update.

Version 2 of Intern Recorder keeps the same primary interface as version 1. The most obvious changes are that the generated test code is in a different format and that it’s syntax highlighted. The more significant updates are under the hood. Recorder and its self-tests now use TypeScript, and the test format is now validated by running some generated tests with Intern, making ongoing maintenance much easier.

Recorder 2 also has some new options. A “Suite name” option lets the user set the name of the current suite. A “Custom attribute” field allows a custom “id” attribute to be specified, such as “data-custom-id”. When this attribute is seen on a target element, it will be used as the selector rather than a structural or “id” selector. This allows Recorder to generate more resilient selectors since they can rely on a specific identifier rather than a structural selector.

Using Recorder

Here are a few tips for getting optimal results when working with Intern Recorder.

1 Be prepared

Don’t perform setup actions as part of a test. Setup the testing environment as much as possible in the code of the test page itself.

2 Be concise

Don’t perform extraneous actions while recording a test. Everything action you take in the browser will end up in the test, and meaningless actions can make the resulting test confusing and brittle.

3 Be specific

Use the proper selection strategy for the task at hand. Often this will be the default, “Use path of element”. This strategy will use a structural XPath selector in the general case, or an id attribute selector if the target element has an id attribute. The strategy can be made more specific by specifying a value for the “Custom attribute” option. If using this option, it will be treated similarly to an id attribute, but with a higher priority.

The other selection strategy, “Use text of element”, considers the text content of an element rather than its XPath or attributes. This selector can be more brittle than the path selectors but may be a good choice if a target element will always have the same text content.

The findDisplayed option can be helpful when working with elements that may appear in the DOM before they become visible, possibly due to CSS animations. (Intern can’t typically interact with non-visible elements.) This option modifies the active selection strategy to wait for elements to become visible to the user before considering them found. It should only be used when necessary, though, since it’s less efficient than the default selection strategies.

4 Improve the generated tests

Once saved, the tests generated by Recorder are just like any other functional test. They can (and should) be commented and updated to make them easier to understand and to improve their functionality. Intern Recorder has limited knowledge about the page as tests get run, and no semantic knowledge about the application itself; in many cases, the structural selectors it uses could be replaced by simpler or more appropriately targetted ones.

Intern Recorder also does not make any assertions about the page. For example, if the title of a page should be “Welcome home!” or if a table element should have a certain number of rows, assertions should be added to verify these conditions.

const { suite, test } = intern.getPlugin('interface.tdd');
const { assert } = intern.getPlugin('chai');

export default suite('welcome', () => {
  test('Test 1', tst => {
    return tst.remote
      .get('https://www.sitepen.com/contact/')
      // .findByXpath('/HTML/BODY[1]/DIV[1]/SECTION/DIV/DIV[1]/DIV/H1')
      // Replace the original selector with a more targetted one
      .findByCssSelector('.title')
        .getVisibleText()
        .then(text => {
          // Add a validation for the title's content
          assert.equal(text, "Let's Connect");
        });
  });
});

Getting Recorder

You can download and install the newest version Intern Recorder from the Chrome Web Store. Once installed, the Recorder will show up on the “Intern” tab in Dev Tools. Usage instructions can be found in the README.

Making improvements

Built Technologies sponsored this release of the Intern Recorder! If you or your company find Intern or Intern Recorder useful, please help support the ongoing development of these tools and consider a similar sponsorship to add features and fixes you’d like to see! Send us an email letting us know of your interest, and we’ll set up a call to discuss how we can help.

Learning more

We cover the creation of functional tests in our Intern and Dojo workshops, and we support developers worldwide in their efforts with JavaScript, TypeScript, and testing. If you would like to discuss how we can help your organization improve their approach to automated testing, please contact us to start the conversation.