Using the Page Object Design Pattern in Sencha Test

Don’t Repeat Yourself (DRY) is a software development principle that is equally important to automation software testing as it is to software development.

In testing, there are different patterns that can help you achieve this. One of them is the Page Object pattern. You’ll find that using this pattern with Sencha Test may be easier than you think.

Using the Page Object Design Pattern in Sencha Test

First of all: “Why the Page Object?”

The Page Object is a Design Pattern that offers several advantages:

• Clean separation between test code and page specific code
• A single place where services and operations offered by the page are placed, instead of being scattered throughout the tests

This enhances test maintenance and reduces code duplication.

To achieve the above, Page Objects have the following responsibilities:

• Hide references to HTML element and the DOM, encapsulating the various queries performed
• Provide higher-level operations than the exposure of elements (like filling a login form)
• Expose frequently made assertions in public methods
• Transitions between page objects or within the same page object, between one state to another one

Now: “How do I use the Page Object in Sencha Test?”

Sencha Test is “the most comprehensive unit and end-to-end functional testing solution for Ext JS single page apps. This cross-browser testing solution ensures that you deliver quality apps and reduce testing time. Sencha Test leverages the powerful Jasmine framework, so you can write tests in JavaScript.”

Sencha Test provides several ways of implementing the Page Object Design Pattern that we will discuss here.

Placing the Page Object inside the test:

This approach is recommended when the page object resources are used only within one test scenario.

Placing these resources within the test file may spur some discussions about whether this is an anti-pattern approach or not. Nowhere within the documentation of this pattern states that we should have different files for the page objects. What’s important is to have independent Page Object classes / objects to achieve the pattern advantages.

describe('Many tests', function () {
  var Page = {
    fooGrid: function () {
      return ST.grid('grid#foo');
    },
    nameField: function () {
      return ST.textField('textfield[name="username"]');
    }
  };
 
  it('might take some time', function () {
    Page.fooGrid().row(42).
      reveal().
      click(10, 10);
  });
 
  it('might take some more time', function () {
    Page.fooGrid().row(999).
      reveal().
      click(10, 10);
  });
});

Source: https://www.sencha.com/blog/inside-the-sencha-test-futures-api/

Placing the Page Object into separate files:

With this approach, you can reuse the page object resources in multiple test scenarios. To do this, you have to add it to Additional Libraries list for the test project within your project.json file as in the example below:

"libs": [
  {
    "disabled": false,
    "path": "/e2e/pages/common/page3.po.js"
  },
  {
    "disabled": false,
    "path": "/e2e/pages/common/page4.po.js"
  }
],

“libs” is a root project property that can also contain any other utility / component classes needed within the test project. All objects added to Additional Libraries are global test objects.

Defining the page object:

var Page = {
  fooGrid: function () {
    return ST.grid('grid#foo');
  },
  nameField: function () {
    return ST.textField('textfield[name="username"]');
  }
};

Using the page object:

describe('Many tests', function () {
 
  it('might take some time', function () {
    Page.fooGrid().row(42).
      reveal().
      click(10, 10);
  });
 
  it('might take some more time', function () {
    Page.fooGrid().row(999).
      reveal().
      click(10, 10);
  });
});

This may be confusing and we may expect to see an Object not defined error when calling Page but that is not the case. Since all objects added to Additional Libraries are global test objects, the above will work as expected.

Conclusion

The Page Objects pattern helps you develop faster, easier and cleaner tests. Maintenance is also easy since OOP principles are applied.

Using this test development pattern with Sencha Test can be as easy as with other test frameworks like Protractor.

Example code can be found here.