pageobject-login

Below is common-login.rst which describes the feature and mappings.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
common-login
============

**Intent**
  This login is used to access UX elements in the RackN portal login process and to preform automated UX login testing.

**Success**
  Passing and Failing test that can detect successful and failed RackN UX portal user login.

**Related Information**
  #. feature help location: docs/source/feature-login.rst
  #. feature file location: src/features/login.features
  #. pageobject help location: (this file) docs/source/pageobject-login.rst
  #. spec test file location: src/spec/login.spec.js
  #. pageobject file location: src/pageojects/login.page.js
  #. visual result file 1: screenshots/screen/login-<testname1>_document_Chrome_v63_1024x768.png
  #. visual result file 2: screenshots/screen/login-<testname2>_document_Chrome_v63_1024x768.png

**Related Links**

.. toctree::
   :maxdepth: 2

   feature-login
   pageobject-login
   help-test-tutorial-login
   help-test-tutorial-login-debug

The above test is run using the following command with the following output.

.. literalinclude:: common-login-termout.txt
  :language: bash
  :linenos:

If you do not see the images, you need to run the test locally and rebuild the docs (see above).

#. bdd-login-test-user_document_Chrome_v63_1024x768

.. image:: ../../screenshots/screen/bdd-login-test-user_document_Chrome_v63_1024x768.png

#. bdd-login-unknown-user_document_Chrome_v63_1024x768

.. image:: ../../screenshots/screen/bdd-login-unknown-user_document_Chrome_v63_1024x768.png

`youtube (17:21) drpfeature login common tests 2018 01 09 15 16 55`_

#. tc27_ Show local of http://drpfeature.readthedocs.io/en/latest/feature-login.html
#. tc73_ Run login.feature test ONLY to verify it is passing::

    yarn run wdio --spec ./src/features/login.features

#. tc116_ Run ALL the tests to verify I didn't break other tests (which I did)::

    yarn run test

#. tc116_ WOOPS... I left 'verbose' on in the wdio.PageObjectTest.conf.js
#. tc207_ WE FOUND an ERROR... yup login.spec.js
#. tc307_ Begin tracing down Error in login.spec.js
#. tc393_ THE FIX - move code that I had in the loginPage.open call into login.spec.js
#. tc580_ Seemed to work... run again to check
#. tc664_ OK... it's working... so NOW lets update the docs and commit the changes.
#. tc741_ Create common-login-termout.txt to dump the results to the document.


#. next

.. _`youtube (17:21) drpfeature login common tests 2018 01 09 15 16 55`: https://youtu.be/OdpHsmyaVXg
.. _tc27: https://youtu.be/OdpHsmyaVXg?t=27
.. _tc73: https://youtu.be/OdpHsmyaVXg?t=73
.. _tc116: https://youtu.be/OdpHsmyaVXg?t=116
.. _tc187: https://youtu.be/OdpHsmyaVXg?t=187
.. _tc207: https://youtu.be/OdpHsmyaVXg?t=207
.. _tc307: https://youtu.be/OdpHsmyaVXg?t=307
.. _tc393: https://youtu.be/OdpHsmyaVXg?t=393
.. _tc580: https://youtu.be/OdpHsmyaVXg?t=580
.. _tc664: https://youtu.be/OdpHsmyaVXg?t=664
.. _tc741: https://youtu.be/OdpHsmyaVXg?t=741

.. raw:: html

    <div style="position: relative; padding-bottom: 5.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
    <iframe width="854" height="480" src="https://www.youtube.com/embed/OdpHsmyaVXg" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
    </div>

**Related - Read The Docs - Links**
  #. common-login_ Common resources for login feature
  #. feature-login_ Documentation for login feature
  #. pageobject-login_ Documentation for login pageobject
  #. help-test-tutorial-login_ Tutorial on developing, debuging and using login testing.

.. _common-login: http://drpfeature.readthedocs.io/en/latest/common-login.html
.. _feature-login: http://drpfeature.readthedocs.io/en/latest/feature-login.html
.. _pageobject-login: http://drpfeature.readthedocs.io/en/latest/pageobject-login.html
.. _help-test-tutorial-login: http://drpfeature.readthedocs.io/en/latest/help-test-tutorial-login.html

Below is the provision UX login.page.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var page = require('./page');

var loginPage = Object.create(page, {
    /**
     * define elements
     */
    username: { get: function () { return $('#username'); } },
    password: { get: function () { return $('#password'); } },
    submitButton: {
      get: function () { 
          return $('input[name="signInSubmitButton"]');
    } },
    racknSupportLogoutinButton: {
      get: function () { 
          return $('#header > div:nth-child(4) > a > a');
    } },
    racknCurrentUserButton: {
      get: function () { 
          return $('#header > div:nth-child(3) > div > div > div.text'); 
    } },
    flash:    { get: function () { return $('//*[@id="loginErrorMessage"]'); } },
    getFlashHTML: { 
        get: function () {
            var textOfFlash = this.flash.getHTML();
            return textOfFlash;
    } },
    /**
     * define or overwrite page methods
     */
    open: { value: function() {
        page.open.call(this, '#/user/login');
       /* this.racknSupportLogoutinButton.waitForExist(3000);
        this.racknSupportLogoutinButton.click();
        this.submitButton.waitForExist(3000);
        this.username.waitForExist(3000);
        this.password.waitForExist(3000); */
    } },

    submit: { value: function() {
        this.submitButton.click();
    } }
});

module.exports = loginPage;

The above test is tested through login.spec.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var expect = require('chai').expect;
var LoginPage = require('../pageobjects/login.page');
var NavbarPageObject = require('../pageobjects/navbar.page');

//- TODO: BEGIN-NOTE
//- Should come from some private/map/dsl thing but for now
const validEmail = 'test@horseoff.com';
const validPass = 'GoodUser1';
const loginText = 'RackN Portal Login'
const logoutText = 'Logout & Support';
//- END-NOTE

describe('drp-ux auth form', function () {
    
    it('bdd-login-unknown-user', function () {
        LoginPage.open();
        LoginPage.racknSupportLogoutinButton.waitForExist(3000);
        LoginPage.racknSupportLogoutinButton.click();
        LoginPage.submitButton.waitForExist(3000);
        LoginPage.username.waitForExist(3000);
        LoginPage.password.waitForExist(3000);
        LoginPage.username.waitForExist(3000);
        LoginPage.username.waitForVisible(3000);
        browser.keys('Tab');
        browser.keys('gobblygook@horseoff.com');
        browser.keys('Tab');
        browser.keys('BadPass');
        browser.keys('Tab');
        browser.keys('Tab');
        browser.keys('Enter');
        //- Visual check is stored in drpfeature/screeshots/screen 
        LoginPage.visCheck('visCheck: wrong creds fail')
    });
    
    it('bdd-login-test-user', function () {
        LoginPage.open();
        LoginPage.racknSupportLogoutinButton.waitForExist(3000);
        LoginPage.racknSupportLogoutinButton.click();
        LoginPage.submitButton.waitForExist(3000);
        LoginPage.username.waitForExist(3000);
        LoginPage.password.waitForExist(3000); 
        browser.keys('Tab');
        LoginPage.username.waitForExist(3000);
        LoginPage.username.waitForVisible(3000);
        LoginPage.username.waitForEnabled(3000);
        browser.keys(validEmail);
        LoginPage.password.waitForExist(3000);
        LoginPage.password.waitForVisible(3000);
        LoginPage.password.waitForEnabled(3000);
        browser.keys('Tab');
        browser.keys(validPass);
        browser.keys('Tab');
        browser.keys('Tab');
        browser.keys('Enter');
        //- Visual check is stored in drpfeature/screeshots/screen 
        NavbarPageObject.visCheck('visCheck: Valid login Check Fail')
    });
});

The test can be ran isolated using the following command:

catmini:drpfeature msops$ yarn run wdio --spec ./src/pospec/login.spec.js

The latest visCheck images should be in drpfeature/screenshots/screen/ directory. If you donot see the images, you need to run the test locally and rebuild the docs following:

catmini:drpfeature msops$ yarn run test:po
catmini:drpfeature msops$ yarn run docs
catmini:drpfeature msops$ open file:///Users/msops/Code/drpfeature/docs/build/html/pageobject-login.html

Of course user your own local path.

Testing Results

If you do not see the images, you need to run the test locally and rebuild the docs (see above).

  1. bdd-login-test-user_document_Chrome_v63_1024x768
../../screenshots/screen/bdd-login-test-user_document_Chrome_v63_1024x768.png
  1. bdd-login-unknown-user_document_Chrome_v63_1024x768
../../screenshots/screen/bdd-login-unknown-user_document_Chrome_v63_1024x768.png

WIP

  1. Basic login test working.
    This is the basic login test via webdriver to login a user. I created a test@horseoff.com email address to test with to get through the aws conig? OAuth like stuff. The major difficulty was just getting the tools up and going AND figureing out React. Could not find much css styling to hang selectors off of and still having issues. But for now… I’ll call it good enough and start logging issues.
  2. Cleanup some documentation to get the general test -> document -> validate -> documentation -> publish workflow down.

TODO

  1. Better Checking, was having issues with sucking up DOM text and doing expects so making that a TODO.
  2. Figure out a CSS / rackN-DSL pattern to use on the login feature and spec test.
  3. Write a login.feature test that leverages login.spec.js