UI testing for a web application, with variant scenarios

Question

I'm pretty new to software testing and am currently working on a cloud-based web application.

Briefly, the application uses:

• Ext JS as a framework
• Bryntum's Siesta framework for testing

Currently, I'm developing a UI test for the application. The Siesta tool is offering a class-extending feature to keep a test environment more consistent and non-iterative. The tool also uses Jasmine's BDD style testing feature.

Until now I've created a base class within 5 methods: login, navigation, grid-elements. Each of them is doing some tiered click actions to displaying approached elements/views/screens. On the other hand, I have more than 15 submodules which have the exact same UI but only several things are changing, such as text-names, etc.

Could you please review the base test class and one of sample submodule implementation and give any idea if I'm doing any iterative/unnecessary code blocks, or any other useful suggestion?

Base class:

Class('Siesta.Test.ListScreen', {
    isa     : Siesta.Test.ExtJS,

    methods: {
    // Here is 2 sample method which is using by all other submodules through inheritance

    navigation: function (packageName, subModule, callback) {
        var t = this;

        t.chain(
            {waitForCQ: treeList, isReadyTimeout: 20000},

            function (next) {
                t.click('treelist[itemId=navigationTreeList]');
                next();

            },
            {click: '>> treelistitem[_text='+packageName+']'},
            {click: '>> treelistitem[_text='+subModule+']', desc: subModule+isDisplaying},
            {click: '#main-navigation-btn => .fa-navicon', desc: collapseDesc},

            function (next) {
                console.log('navigation func log');
                next();
            },

            callback
        );
    },
        grid: function (submoduleGrid, submoduleData, rootNumber, columnName, rowNumberer, callback) {
            var t = this;

            t.chain(
                function (next) {
                    console.log('grid func log');
                    next();
                },
                {waitForCQ: submoduleGrid +'[xtype='+ submoduleGrid +']', isReadyTimeout: 20000},
                {click: '#main-home #contentPanel ' + submoduleGrid +'> :ariadne-nth-child(1) tableview => .x-grid-item:nth-of-type(1) .x-grid-row-expander', desc: 'Clicks on Row Expander', isReadyTimeout: 20000},
                {click: '#main-home #contentPanel ' + submoduleGrid +' > :ariadne-nth-child(1) tableview => .x-grid-item:nth-of-type(1) .x-grid-checkcolumn', desc: 'Clicks on All checkbox ', isReadyTimeout: 20000},
                {click: '>> button[itemId=editBtn]', desc: 'Clicks on Edit button', isReadyTimeout: 20000},
                {waitForCQ: submoduleGrid +'[xtype='+ submoduleGrid +']', isReadyTimeout: 20000},
                {
                    action      : 'drag',
                    source      : '#main-home #contentPanel ' + submoduleData +'[xtype='+ submoduleData +'] => .x-title-icon',
                    to          : '.x-table-layout-cell'
                },
                {click: '>> button[text=Cancel]', timeout: 50000, desc: 'Cancel button works!', isReadyTimeout: 20000},
                {click: '#main-home #contentPanel ' + submoduleGrid +' > :ariadne-nth-child(1) tableview button(true):root('+rootNumber+') => .x-btn-wrap', timeout: 50000, desc: 'Clicks Menu button', isReadyTimeout: 20000},

                {click: '.x-menu-item-text:textEquals(Delete)', timeout: 50000, desc: 'Clicks Delete button', isReadyTimeout: 20000},
                {click: '>> button[text=No]', timeout: 50000, desc: 'No button works!', isReadyTimeout: 20000},
                {click: '#main-home #contentPanel ' + submoduleGrid +' > :ariadne-nth-child(1) tableview button(true):root('+rootNumber+') => .x-btn-wrap', timeout: 50000, desc: 'Clicks Menu button once again', isReadyTimeout: 20000},
                {moveCursorTo: '#main-home #contentPanel pagingtoolbar[name=pagingtoolbar] => .x-box-inner', timeout: 50000, desc: 'Scrolling Up to Down', isReadyTimeout: 20000},
                {moveCursorTo: '#main-home #contentPanel #normalHeaderCt ' + columnName + '=> .x-column-header-text-inner', timeout: 50000, desc: 'Scrolling Left to Right', isReadyTimeout: 20000},

                callback
            )
        },

A sample Submodule:

describe('UI Testing: Submodule List Screen', function (t) {
    t.it('Should extend the Test Class and Login to App', function (t) {
       t.chain(
           {
                login: t.next
            }
        )
    });

    t.it('Should open: Submodule Grid', function (t) {
        t.chain(
            {
                navigation: [ 
                              'Definitions', //packageName
                              'Credit Card' //subModule
                            ]
            }
        )
    });

    t.it('Testing Upper Toolbar: Refresh, New, Print, Export to PDF, Export to Excel', function (t) {
        t.chain(
            {
                upperToolbar: 'ccarddata'
            }
        )
    });

    t.it('Testing Grid: Edit button, Menu button, Scrolling left > right, Clicking/selecting random row/cell', function (t) {
        t.chain(
            {
                grid: [
                    'ccardgrid', //submoduleGrid
                    'ccarddata', //submoduleData
                    '6',         //rootNumber
                    'crcardexpiredatecol[text=CC Expire Date]', //columnName
                    '49'            //rowNumberer
                ]
            }
        )
    });

    t.it('Testing Bottom Toolbar: Page field, Next/Prev Page buttons, Search combobox & Item selecting, Type in Search field, Clicks on Displaying progress bar', function (t) {
        t.chain(
            {
                bottomToolbar: t.next
            }
        )
    });
});