Quality Assurance and Testing with Chai - Run Functional Tests Using a Headless Browser

Thato325 · March 16, 2023, 9:47am

Tell us what’s happening:
Hi everyone i am running the project locally please see code below…

when i run the tests all tests are passing besides the first 1

this is the error message i recive

2 failing

Functional Tests with Zombie.js
“Famous Italian Explorers” form
Submit the surname “Colombo” in the HTML form:
AssertionError [ERR_ASSERTION]: No open window with an HTML document

please assist i have been stuck for 2 days now

Your project link(s)

solution: http://localhost:3000

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Quality Assurance and Testing with Chai - Run Functional Tests Using a Headless Browser

Link to the challenge:

Hi everyone i am running the project locally please see code below…

when i run the tests all tests are passing besides the first 1

this is the error message i recive

2 failing

Functional Tests with Zombie.js
“Famous Italian Explorers” form
Submit the surname “Colombo” in the HTML form:
AssertionError [ERR_ASSERTION]: No open window with an HTML document

please assist i have been stuck for 2 days now

const chai = require('chai');
const assert = chai.assert;

const server = require('../server');

const chaiHttp = require('chai-http');
chai.use(chaiHttp);

suite('Functional Tests', function () {
  this.timeout(5000);
  suite('Integration tests with chai-http', function () {
    // #1
    test('Test GET /hello with no name', function (done) {
      chai
        .request(server)
        .get('/hello')
        .end(function (err, res) {
          assert.equal(res.status, 200);
          assert.equal(res.text, 'hello Guest');
          done();
        });
    });
    // #2
    test('Test GET /hello with your name', function (done) {
      chai
        .request(server)
        .get('/hello?name=xy_z')
        .end(function (err, res) {
          assert.equal(res.status, 200);
          assert.equal(res.text, 'hello xy_z');
          done();
        });
    });
    // #3
    test('Send {surname: "Colombo"}', function (done) {
      chai
        .request(server)
        .put('/travellers')
        .send({
          surname: "Colombo", 
        })
        .end(function (err, res) {
          assert.equal(res.status, 200)
          assert.equal(res.type, 'application/json')
          assert.equal(res.body.name, 'Cristoforo')
          assert.equal(res.body.surname, 'Colombo')
          done();
        });
    });
    // #4
    test('Send {surname: "da Verrazzano"}', function (done) {
      chai
        .request(server)
        .put('/travellers')
        .send({
          "surname": "da Verrazzano"
        })
        .end((err, res)=> {
          assert.equal(res.status, 200)
          assert.equal(res.type, 'application/json')
          assert.equal(res.body.name, 'Giovanni')
          assert.equal(res.body.surname, 'da Verrazzano')
          done();
        })
    });
  });
});

const Browser = require('zombie');
Browser.site = 'http://localhost:3000/'; // Your URL here
suite('Functional Tests with Zombie.js', function () {
  this.timeout(5000);
  console.log('starting...')
  const browser = new Browser();
  suite('Headless browser', function () {
    test('should have a working "site" property', function() {
      suiteSetup(function(done) {
        return browser.visit('/', done);
      });
      assert.isNotNull(browser.site);
    });
  });

  suite('"Famous Italian Explorers" form', function () {
    // #5
    test('Submit the surname "Colombo" in the HTML form', function (done) {
      browser.fill('surname', 'Polo').then(() => {
        browser.pressButton('submit', () => {
          browser.assert.success();
          browser.assert.text('span#name', 'Cristoforo');
          browser.assert.text('span#surname', 'Colombo');
          browser.assert.elements('span#dates', 1);
          done();
        });
      });
    });
    // #6
    test('Submit the surname "Vespucci" in the HTML form', function (done) {
      assert.fail();

      done();
    });
  });
});

3xxxo · March 16, 2023, 4:11pm

try moving this part outside the current suite

Thato325 · March 17, 2023, 8:39am

Hi @3xxxo

thank you for your reply…

could you please explain what you mean?

when i try move the part above it wont pass the previous test before namely this 1

Simulate Actions Using a Headless Browser

Thato325 · March 17, 2023, 10:34am

this is more detailed error message im getting

Functional Tests with Zombie.js
Headless browser
wow
should have a working “site” property
“Famous Italian Explorers” form
1) Submit the surname “Colombo” in the HTML form
2) Submit the surname “Vespucci” in the HTML form

23 passing (63ms)
2 failing

Functional Tests with Zombie.js
“Famous Italian Explorers” form
Submit the surname “Colombo” in the HTML form:
AssertionError [ERR_ASSERTION]: No open window with an HTML document
at Browser.field (node_modules/zombie/lib/index.js:598:5)
at Browser.fill (node_modules/zombie/lib/index.js:646:24)

igorgetmeabrain · March 17, 2023, 10:56am

Could you share a link to your code please? These headless browser tests are a bit of a thorny issue as replit and zombie do not appear to be particularly cooperative, but there’s a workaround.

Thato325 · March 17, 2023, 11:08am

@igorgetmeabrain thank you for your response

I am running the project locally because when I tried replit it just kept failing from the beginning

but here is the code for the functional tests

const chai = require('chai');
const assert = chai.assert;

const server = require('../server');

const chaiHttp = require('chai-http');
chai.use(chaiHttp);

suite('Functional Tests', function () {
  this.timeout(5000);
  suite('Integration tests with chai-http', function () {
    // #1
    test('Test GET /hello with no name', function (done) {
      chai
        .request(server)
        .get('/hello')
        .end(function (err, res) {
          assert.equal(res.status, 200);
          assert.equal(res.text, 'hello Guest');
          done();
        });
    });
    // #2
    test('Test GET /hello with your name', function (done) {
      chai
        .request(server)
        .get('/hello?name=xy_z')
        .end(function (err, res) {
          assert.equal(res.status, 200);
          assert.equal(res.text, 'hello xy_z');
          done();
        });
    });
    // #3
    test('Send {surname: "Colombo"}', function (done) {
      chai
        .request(server)
        .put('/travellers')
        .send({
          surname: "Colombo", 
        })
        .end(function (err, res) {
          assert.equal(res.status, 200)
          assert.equal(res.type, 'application/json')
          assert.equal(res.body.name, 'Cristoforo')
          assert.equal(res.body.surname, 'Colombo')
          done();
        });
    });
    // #4
    test('Send {surname: "da Verrazzano"}', function (done) {
      chai
        .request(server)
        .put('/travellers')
        .send({
          "surname": "da Verrazzano"
        })
        .end((err, res)=> {
          assert.equal(res.status, 200)
          assert.equal(res.type, 'application/json')
          assert.equal(res.body.name, 'Giovanni')
          assert.equal(res.body.surname, 'da Verrazzano')
          done();
        })
    });
  });
});

const Browser = require('zombie');
Browser.site = 'http://localhost:3000/'; // Your URL here
const browser = new Browser();
// suiteSetup(function(done) {
//   return browser.visit('/', done);
// });

suite('Functional Tests with Zombie.js', function () {
  this.timeout(5000);

  // suiteSetup(function(done) {
  //   return browser.visit('/', done);
  // });

  suite('Headless browser', function () {
    test('should have a working "site" property', function() {

      suiteSetup(function(done) {
        return browser.visit('/', done);
      });
      console.log('wow')
      assert.isNotNull(browser.site);
    });
  });

  suite('"Famous Italian Explorers" form', function () {
    
    // #5 'Submit the surname "Colombo" in the HTML form'
    test('Submit the surname "Colombo" in the HTML form', function (done) {
      browser.fill('surname', "Colombo").then(() => {
        browser.pressButton('submit', () => {
          browser.assert.success();
          browser.assert.text('span#name', 'Cristoforo');
          browser.assert.text('span#surname', "Colombo");
          browser.assert.elements('span#dates', 1);
          done();
        });
      });
      done();
    });
    // #6
    test('Submit the surname "Vespucci" in the HTML form', function (done) {
      assert.fail();

      done();
    });
  });
});

Thato325 · March 17, 2023, 11:30am

hi @igorgetmeabrain

i have created a repl and just copied my code over

https://boilerplate-mochachai-2.thatolebethe.repl.co/

hope this helps

igorgetmeabrain · March 17, 2023, 11:44am

What happens if you move this code directly inside the root of the test suite (i.e. directly below the line suite('Functional Tests with Zombie.js', function () {)?

const browser = new Browser();
suiteSetup(function(done) {
  return browser.visit('/', done);
});

…and remove this.timeout(5000)?

So it should look like this:

const Browser = require('zombie');
Browser.site = 'http://localhost:3000/';

suite('Functional Tests with Zombie.js', function() {
  
const browser = new Browser();
suiteSetup(function(done) {
  return browser.visit('/', done);
});

etc

Thato325 · March 17, 2023, 12:29pm

@igorgetmeabrain
I tried your suggestion please see code below

const chai = require('chai');
const assert = chai.assert;

const server = require('../server');

const chaiHttp = require('chai-http');
chai.use(chaiHttp);

suite('Functional Tests', function () {
  this.timeout(5000);
  suite('Integration tests with chai-http', function () {
    // #1
    test('Test GET /hello with no name', function (done) {
      chai
        .request(server)
        .get('/hello')
        .end(function (err, res) {
          assert.equal(res.status, 200);
          assert.equal(res.text, 'hello Guest');
          done();
        });
    });
    // #2
    test('Test GET /hello with your name', function (done) {
      chai
        .request(server)
        .get('/hello?name=xy_z')
        .end(function (err, res) {
          assert.equal(res.status, 200);
          assert.equal(res.text, 'hello xy_z');
          done();
        });
    });
    // #3
    test('Send {surname: "Colombo"}', function (done) {
      chai
        .request(server)
        .put('/travellers')
        .send({
          surname: "Colombo", 
        })
        .end(function (err, res) {
          assert.equal(res.status, 200)
          assert.equal(res.type, 'application/json')
          assert.equal(res.body.name, 'Cristoforo')
          assert.equal(res.body.surname, 'Colombo')
          done();
        });
    });
    // #4
    test('Send {surname: "da Verrazzano"}', function (done) {
      chai
        .request(server)
        .put('/travellers')
        .send({
          "surname": "da Verrazzano"
        })
        .end((err, res)=> {
          assert.equal(res.status, 200)
          assert.equal(res.type, 'application/json')
          assert.equal(res.body.name, 'Giovanni')
          assert.equal(res.body.surname, 'da Verrazzano')
          done();
        })
    });
  });
});


const Browser = require('zombie');
Browser.site = 'http://localhost:3000/'; // Your URL here
suite('Functional Tests with Zombie.js', function () {
  const browser = new Browser();
  suiteSetup(function(done) {
    return browser.visit('/', done);
  });
  // this.timeout(5000);


  suite('Headless browser', function () {
    test('should have a working "site" property', function() {
      assert.isNotNull(browser.site);
    });
  });

  suite('"Famous Italian Explorers" form', function () {
    
    // #5 'Submit the surname "Colombo" in the HTML form'
    test('Submit the surname "Colombo" in the HTML form', function (done) {
      browser.fill('surname', "Colombo").then(() => {
        browser.pressButton('submit', () => {
          browser.assert.success();
          browser.assert.text('span#name', 'Cristoforo');
          browser.assert.text('span#surname', "Colombo");
          browser.assert.elements('span#dates', 1);
          done();
        });
      });
      done();
    });
    // #6
    test('Submit the surname "Vespucci" in the HTML form', function (done) {
      assert.fail();

      done();
    });
  });
});

the error im getting please see screenshot

with regards to the suite setup it only works when i place it in the root of the suite like i did in other code snippets i provided

igorgetmeabrain · March 17, 2023, 12:40pm

It still doesn’t work if you keep the code as I suggested but restore the timeout (above the other code)?

Thato325:

const Browser = require('zombie');
Browser.site = 'http://localhost:3000/'; // Your URL here

suite('Functional Tests with Zombie.js', function () {
  this.timeout(5000);
  const browser = new Browser();
  suiteSetup(function(done) {
    return browser.visit('/', done);
  });

I get it working on replit by doing this (without the timeout) but adding the timeout back in is a possible remedy when running it locally.

Thato325 · March 17, 2023, 1:06pm

when you say get it working do you mean it passes the tests?

Thato325 · March 17, 2023, 1:17pm

also this is the error i get in the console

2 failing

Functional Tests with Zombie.js
“Famous Italian Explorers” form
Submit the surname “Colombo” in the HTML form:
AssertionError [ERR_ASSERTION]: No open window with an HTML document

im not sure what it means when it says “No open window with an html document”

I belive the window might get closed before hand which is why the not all tests are are passing test is not passing

igorgetmeabrain · March 17, 2023, 3:05pm

Here’s a link to my repl, which passes all tests in the repl and also on FCC:
https://replit.com/@igorgetmeabrain/boilerplate-mochachai

I also added this to the bottom of my 2_functional-tests.js file, as the QA tests crash the repl and this restarts it so that the FCC tests can pass:

after(function() {
  chai.request(server)
  .get('/')
});

I can only see the code which you’ve posted here, as I don’t have a link to your complete project code, but perhaps you’ll be able to figure it out from looking at my code?

Thato325 · March 17, 2023, 5:13pm

@igorgetmeabrain

thanks for your help mate , i tried to spot the differences but i couldn’t find any ,so I dont know where I went wrong , but its working now… appreciate the effort you took to help

igorgetmeabrain · March 17, 2023, 7:23pm

No worries, I don’t entirely understand these issues myself, but glad you got it working!

system · September 16, 2023, 7:24am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.