Page Object Pattern in Sencha Test

   JavaScript
Page Object Patterns in Sencha Test

First of all, ‘Why Page Object Pattern?’

Because the Page Object is a design pattern that offers several advantages:

  • Clean separation between test code and page specific code.
  • One 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 elements and the DOM, encapsulating the various queries performed.
  • Provide higher-level operations than just the exposure of elements like filling the 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.

Second, ‘How do you use Page Object Patterns in Sencha Test?’

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

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

Placing the Page Object inside the test:

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

Placing page objects within the test itself may be considered an anti-pattern approach. However, nowhere within the documentation of this pattern does it state that we should have different files for page objects. What’s most important is having 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);
  });
}); 

2

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 the Additional Libraries list for the test project within the project.json file as shown 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 class 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 it is not the case. Since all objects added to Additional Libraries are global test objects, this 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 other test frameworks like Protractor, which is also a great tool I enjoy using.

Starter app code can be found here.


  1. Source: https://www.sencha.com/products/test/#overview 

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


Like What You See?

Got any questions?