Results 1 to 6 of 6

Thread: How to make page object pattern work in Sencha Test Studio to make test code reusable

  1. #1
    Sencha User
    Join Date
    Jan 2016
    Posts
    12

    Default How to make page object pattern work in Sencha Test Studio to make test code reusable

    Hello,

    I am trying to use page object pattern with Sencha Test studio, but it does not work.
    such as:

    ========== loginpage.js:
    var LoginPage = Object.create( {
    /**
    * define elements
    */
    username: function () { return ST.component("textfield[name="username"]"); },
    password:function () { return ST.component("textfield[name="password"]"); } ,
    loginBtn: function () { return ST.component("button[text="Login"]"); },


    /**
    * define page methods
    */
    pressLoginBtn: function() {
    this.loginBtn()
    .visible()
    .click();
    },


    });module.exports = new LoginPage();

    =========== test script: testlogin.js:
    var loginpage = require("../common/uiandactions/loginpage")

    describe('Login page - common', function () {
    it('Login page is loaded', function () {
    loginpage.pressLoginBtn();
    });
    });


    Any suggestions?

    Thanks

  2. #2
    Sencha User vojtech.cerveny's Avatar
    Join Date
    Jun 2015
    Location
    Ostrava, Czech republic
    Posts
    52
    Answers
    10

    Default

    Hi!
    I looked at your code and I found one issue. But I am not sure, if it will resolve your problem, because you didn't post error message or what happened with ST.
    One issue - You have bug in your query
    Code:
    "textfield[name="username"]" // bug
    You can use different quotation marks -
    Code:
    "textfield[name='username']" //first option
    "textfield[name=username]" //second option
    Fixed code:
    Code:
        
    var LoginPage = Object.create({
            /**
            * define elements
            */
            username: function () { 
                return ST.component("textfield[name=username]"); 
            },
            password: function () { 
                return ST.component("textfield[name=password]"); 
            },
            loginBtn: function () { 
                return ST.component("button[text=Login]"); 
            },
            /**
            * define page methods
            */
            pressLoginBtn: function() {
                this.loginBtn()
                    .visible()
                    .click();
            }
        });

    I tried your code (with query string fix) in one file (testlogin.js) and it worked properly.

    I am not sure about module.exports, if it works, I didn't try it, but I believe that you can use Additional Libraries for it. Go to your workspace, node Tests and add Additional library to your workspace. Then SenchaTest will provide this library for every test in your project (or scenario).

    Selection_118.png



    Feel free to contact me anytime.
    Vojtěch
    “Testers don’t like to break things; they like to dispel the illusion that things work.”— Kaner, Bach, Pettichord

  3. #3
    Sencha User
    Join Date
    Jan 2016
    Posts
    12

    Default

    Hello Vojtěch,

    Thank you for your response.

    The problem is not from "textfield[name="username"]" , it has escape there( attached wrongly). After checking console.log I found require() is undefined. People mentioned browsers does not load requireJS in default. Any idea what should I do?

    Regards
    Heather

  4. #4
    Sencha User vojtech.cerveny's Avatar
    Join Date
    Jun 2015
    Location
    Ostrava, Czech republic
    Posts
    52
    Answers
    10

    Default

    You need add your loginpage.js to Additional Libraries (look at screenshot in my first post) and then ST will automatically load this file.
    It is replace of your require and you can delete it.
    Code:
    var loginpage = require("../common/uiandactions/loginpage") //delete it
    “Testers don’t like to break things; they like to dispel the illusion that things work.”— Kaner, Bach, Pettichord

  5. #5
    Sencha User
    Join Date
    Jan 2016
    Posts
    12

    Default seek the solution to organize the test cases in Sencha Test

    Hello Vojtěch,

    I tried to use requireJS to load one file from another, but unsuccessful. For a large project, code reusability and maintainability are very important.

    For Sencha Test samples , they are all in one file for a test suite.

    Any suggestion and any solution to organize the test cases in Sencha Test in order to make them reusable and maintainable?


    Regards
    Heather

  6. #6
    Sencha User vojtech.cerveny's Avatar
    Join Date
    Jun 2015
    Location
    Ostrava, Czech republic
    Posts
    52
    Answers
    10

    Lightbulb

    How I said, you must add your files to the Additional Libraries.

    Look at my previous posts and try add your file in Test settings. It works and it works good!

    I have two files - one in scenario
    Code:
    //test.js
    describe("test", function() {
        it("should pass", function() {
            Lib.print();
        });
    });
    and second in my workspace
    Code:
    //library.js - it is in workspace, or you can have it where you want
    var Lib = {
          print: function(){
            console.log('This is log from Lib.print()');
          }
    };

    My project settings:
    screen0.PNG

    Console from browser
    screen1.PNG
    And browser console - TAB network, that ST includes library.js and it is available for test.js
    screen2.PNG


    Feel free to contact me any time.
    Vojtěch
    “Testers don’t like to break things; they like to dispel the illusion that things work.”— Kaner, Bach, Pettichord

Similar Threads

  1. Replies: 2
    Last Post: 21 Sep 2016, 7:05 AM
  2. Replies: 6
    Last Post: 11 Aug 2016, 8:10 AM
  3. Replies: 1
    Last Post: 9 Aug 2016, 3:46 AM
  4. Replies: 2
    Last Post: 4 Aug 2016, 4:27 AM
  5. Replies: 4
    Last Post: 26 Jan 2016, 3:13 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •