How to enable Authentication?

[ghost]

I need to be able to add Authentication to the fixture and can't figure out how to do this.
Are there any fixture hooks or other ways to handle this?
fixture.httpAuth({ username: 'user', password: 'pw'});

[Lukas-Kullmann]

Hey @KyleCraviotto,

it is not possible to set access the fixture or test object directly. Please write a custom request hook and manipulate the request's credentials from there.
You can use cucumber's Before-hooks to attach the request hook to any test controller:

Before('@requestWithCredentials', async t => {
  t.addRequestHooks(AddAuthCredentialsHook);
});

[dthisner]

@Lukas-Kullmann Could I please request an example of an auth credential hook? :)

[Lukas-Kullmann]

Sure:

import { RequestHook } from 'testcafe';

class AddAuthCredentialsHook extends RequestHook {
  constructor(username, password) {
    super();

    this.username = username;
    this.password = password;
  }

  async onRequest (event) {
    if (event.isAjax) {
      event.requestOptions.credentials.username = this.username;
      event.requestOptions.credentials.password = this.password;
    }
  }

  async onResponse () {}
}

Before('@requestWithCredentials', async t => {
  const addAuthCredentiasHook = new AddAuthCredentialsHook('user', 'pw');
  t.addRequestHooks(addAuthCredentialsHook);
});

Disclaimer: I did not test if this actually works, but this is what the documentation would suggest so it might be a good starting point. :)

[dthisner]

Thanks you :) It gives me a better understanding how it works

Sadly, I am not able to get it to work :(
I end up getting to an "unauthorized" page. If I run it through "normal" testCafe, it works when I am doing:

fixture`Getting Started`
  .page`https://staging-stream.proj.io/login`
  .httpAuth({
    username: 'BobTheThird',
    password: 'SuperPass42',
  });

This is what I have based on what you suggested:

class AddAuthCredentialsHook extends RequestHook {
  constructor(username, password) {
    super();
    this.username = username;
    this.password = password;
  }

  async onRequest(event) {
    if (event.isAjax) {
      event.requestOptions.url = "https://staging-stream.proj.io/login"
      event.requestOptions.credentials.username = this.username;
      event.requestOptions.credentials.password = this.password;
    }
  }
  async onResponse() { }
}

Before('@loginFunc', async t => {
  const addAuthCredentiasHook = new AddAuthCredentialsHook('BobTheThird', 'SuperPass42');
  await t.addRequestHooks(addAuthCredentiasHook);
});

Any ideas?

[dthisner]

I removed if (event.isAjax) - since it looks like the request is not Ajax.
Then I am getting following error:

  2) Unhandled promise rejection:

      TypeError: Cannot set property 'username' of null
      at AddAuthCredentialsHook.onRequest

   (/Users/dennis/Projects/src/comp.co/prj-compare-webapp/src/tests/ui/stepDefinitions/login/login.js:29:47)
      at

   /Users/dennis/Projects/src/comp.co/prj-compare-webapp/node_modules/testcafe-hammerhead/lib/session/index.js:213:73
      at Generator.next (<anonymous>)
      at step

[Lukas-Kullmann]

Maybe try

  async onRequest(event) {
    event.requestOptions.credentials = {
      ...event.requestOptions.credentials,
      username: this.username,
      password: this.password
    };
  }

Plus I don't think you need to set the URL.

[dthisner]

I LOVE YOU!
Thank you so much! :D I really appreciate it!
It works :D