Get help with testing, discuss unit testing strategies etc.


Post by davmillar »

Apologies if this is a stupid question. I've been working on adding tests to our suite for our new plain HTML/JS/CSS login page, and it's the first time we're writing tests that aren't for an ExtJS app. Some of the test helpers seem to work for verifying that elements exist, but using document.getElementById() seems to search the harness page instead. How would I go about accessing DOM elements in the login page?

This works fine:
      test.describe('Get into the login page and verify everything looks OK', function (test) {
        test.waitForSelector('#panel', function () {
          test.it('should find the main login panel', function (test) {
            test.selectorExists('#panel');
          });
          test.it('should contain a username field and password field', function (test) {
            test.selectorExists('#user_id');
            test.selectorExists('#password');
          });
          test.it('should contain a log in button', function (test) {
            test.selectorExists('input[type=submit]');
          });
          test.it('should have the username field focused', function (test) {
            test.selectorExists('#user_id:focus');
          });
        });
      });
This does not work:
      test.describe('Perform a login from the login page', function (test) {
        console.debug(document.getElementById('user_id'););
        test.chain(
          {
            action: 'type',
            target: document.getElementById('user_id'),
            text: 'TESTUSER'
          }
        );
      });

Post by mats »

Are you using https://www.bryntum.com/docs/siesta/#!/a ... geRedirect ?

And regardless, use strings instead - always.
test.describe('Perform a login from the login page', function (test) {
        console.debug(document.getElementById('user_id'););
        test.chain(
          {
            action: 'type',
            target: "#user_id",
            text: 'TESTUSER'
          }
        );
      });

Post by davmillar »

Thanks for the info, mats. We are using that flag -- I just hadn't noticed because we have our base setup abstracted from the rest of the testing code and the guy most familiar with it was out of the office. :)

I didn't realize a selector string could be used there. That makes things much easier -- it worked like a charm. I hadn't thought to try it because the docs say that the target can only be a DOM element or an ExtJS component:
The target can be a DOM element or, in case you are using the Siesta.Test.ExtJS class - an instance of a Ext.Component (field component for example).
Hopefully that's an easy fix for you guys to make on Monday morning before the coffee kicks in. ;)

Have a good weekend!

Post by mats »

the docs say that the target can only be a DOM element or an ExtJS component:
Docs updated. Two issues with your current approach.

1. Your target will be evaluated too early, as it's evaluated at t.chain creation time

2. When using enablePageRedirect, 'document' and 'window' point to the top window context. To reach the test global use:
t.global

Post by davmillar »

mats wrote:
the docs say that the target can only be a DOM element or an ExtJS component:
Docs updated. Two issues with your current approach.

1. Your target will be evaluated too early, as it's evaluated at t.chain creation time

2. When using enablePageRedirect, 'document' and 'window' point to the top window context. To reach the test global use:
t.global
Issue 2 is good to know -- thank you. Issue 1 doesn't seem to have hit us yet, but this might be due to how the chain is constructed inside a helper method that isn't executed until the time at which the page would be ready with the desired target(s). I'll relay this info to our testing specialist though as I work on my tests again.

Thanks again for your help. :)

Post Reply