1

I'm having a hard time figuring out how to organize my test code, i.e. test cases, into suites and runs.

On the one hand, tests should, by definition, be independent of each other, that's why I, for example, have a test file for only doing the login operation and another one for doing something on the welcome page.

Thing is, in order to get to the welcome page, you must first login.
Makes sense.

In other test frameworks I've used in the past I knew how to call one test case from another (i.e. reusing code from one file in the other file).

However, my current company uses Testcafe as our automation tool, and try as I might to find an answer online, I can't see how I can use the login code (say it's in file loginTest.js) in the welcome page code (in welcomePageTest.js).

If at all possible I'd like to stay away from solutions such as creating a runner script and running it as I like working in Live mode.

Any ideas on how to reuse and call tests from one file in another in Testcafe?

  • 1
    Note that what you are doing doesn't make checks independent, on execution. Check independency, in this case, would be to have a check for the login and, to reach the welcome page, you would fetch an auth token or bypass authentication and visit the page. – João Farias Nov 28 '19 at 11:24
  • Indeed. That is why I stated I know test should be independent, so on, so forth, but for my current setting and constraints I'd rather blaze through with all UI then start reading documentation, both in JS and my own product's on how do I do an HTTP call in JS and what is the auth endpoint on the server. I need to be quick and practical with this one, not "by the books". But thanks for bringing the point up, you are, as I said, absolutuley, 100% correct. – O.F. Nov 28 '19 at 12:01
3

It's an easy solution, you just need to import all the js functions, create an object of those functions and use it in your test fixtures

Astaqc.com: outsource Software Testing

| improve this answer | |
1

You can easily reuse code in TestCafe using Page Object model/pattern.

The way I organise a TestCafe project in the project dir is the following:

.
├── config.json
├── Helpers
├── node_modules
├── Objects
├── package.json
├── package-lock.json
├── Resources
├── Results
└── Tests

In Objects/, you can declare a class that represents something on your website. E.g. you can create a class with one action logIn for a login page:

import { Selector, t } from 'testcafe';

class LogIn {
    constructor () {
        this.logInEmailInput = Selector('#LoginViewModel_Email'); 
        this.logInPwdInput = Selector('#LoginViewModel_Password');
        this.enterButton = Selector('button').withExactText('Sign In');        
    }

    async logIn (email, pwd) {
        await t
            .typeText(this.logInEmailInput, email)
            .typeText(this.logInPwdInput, pwd)
            .click(this.enterButton);
    }
}

export default new LogIn();

Then in Tests/, I can test a user (multiple users) can actually log into the system:

import { Selector } from 'testcafe';
import config from '../config';
import LogIn from '../Objects/logIn';
import PageMsg from '../Objects/pageMsg';

const testData = require('../Resources/logIn.json');

fixture `Log In`    
    .page `${config.baseUrl}`;

testData.credentials.forEach(credentials => {
    test('Log Into User Account', async t => {
        // This is where I reuse code from the above-mentioned class
        await LogIn.logIn(credentials.username, credentials.password);

        // I assert that the action actually was successful
        await t
            .expect(PageMsg.pageMsg.innerText).eql(PageMsg.successfulLogIn);                     
    });
});

If I want to test something inside a user profile, I'd need to log in first. For that, I can reuse LogIn.logIn() method again, this time perhaps in before or beforeEach hook.

Another code that could be reused is in Helpers/. TestCafe for example doesn't provide a function for reloading the current page, so I can create my own inside Helpers/ directory:

import { t } from 'testcafe';

export async function reload () {
    await t
        .eval(() => location.reload(true));
}

Then I'd use it in tests like so:

await reload();

In other test frameworks I've used in the past I knew how to call one test case from another (i.e. reusing code from one file in the other file).

Calling test cases from other test cases in my opinion creates more dependencies than you want to aim for. Better follow this Page Object model.

TestCafe provides a tutorial on how to structure tests, you can find more here: https://devexpress.github.io/testcafe/documentation/guides/basic-guides/organize-tests.html and here: https://devexpress.github.io/testcafe/documentation/guides/concepts/page-model.html The second link is a step-by-step tutorial on how to go about this PO model.

| improve this answer | |
0

You can use Test Hooks like beforeEach() to login, for example:

fixture('My Component')
  .beforeEach(async (t) => {
    // your login method
   login(user, password);
});
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.