Run functional tests with a headless browser

JavaScript
1

I’ve tried searching for the solution to passing these tests, and I’ve read that there may be problems with the test themselves? The code I’ve written is as follows (I’ve tried many combinations), but I can’t see anything wrong with it…

My question is, have I made a mistake (any pointers greatly appreciated) or is there still a problem with the tests themselves?

Thank you.

Here is my code:

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 () {

  suite('Headless browser', function() {
    test('should have a working "site" property', function() {
      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', 'Colombo').pressButton('submit', function() {
          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();
    });
  })

});
2

When your code is posted as it is now, it’s full of smart quotes, so I can’t do much with it.
Could you repaste all of your code within backticks please?
Just click on </> (or CTRL+e) and paste everything into the space provided.
Or, even better, just a link to your repl code.

4

Thank you!
The code is pasted below (all the tests timeout on repl so I needed to develop locally).

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 () {

  suite('Headless browser', function() {
    test('should have a working "site" property', function() {
      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', 'Colombo').pressButton('submit', function() {
          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();
    });
  })

});
5

This throws an error in the console (‘not a function’).
You need to give a separate pressButton command:

browser.fill('surname', 'Colombo');
browser.pressButton(...

Then all of your tests pass for me (except the last one, which you haven’t filled out yet).

As for the local vs live link testing, this discussion yesterday sort of got it working with the repl live link: Quality Assurance and Testing with Chai - Run Functional Tests Using a Headless Browser

I’ve since rolled my code back to a version which passes locally and remains stable (using ‘after’ code to reboot when the repl crashes): boilerplate-mochachai - Replit

6

Thank you very much for your reply. I’ve made the change but I am getting this error: 'AssertionError [ERR_ASSERTION]: No INPUT matching ‘surname’ ’ The full code is here. I’ve also added below my package.json contents just incase there is version issue between your packages and mine?

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 () {

  suite('Headless browser', function() {
    test('should have a working "site" property', function() {
      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', 'Colombo');
      browser.pressButton('submit', function() {
          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();
    });
  })

});

and the package.json…

{
  "name": "automated-testing-app",
  "version": "0.0.1",
  "description": "Boilerplate for the Quality Assurance and Testing with Chai challenges",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "body-parser": "1.19.0",
    "chai": "4.3.4",
    "chai-http": "4.3.0",
    "cors": "2.8.5",
    "express": "4.17.1",
    "mocha": "9.0.3",
    "zombie": "6.1.4"
  },
  "license": "MIT"
}
7

Oh, you need to remove the parentheses from done in the return statement.

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

Hello! Unfortunately, removing the parenthesis gives me this error? Are there any other differences between the working code and mine?
‘TypeError: bind EINVAL 0.0.0.0’

Here is my full code that generates this error:

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 () {

  suite('Headless browser', function() {
    test('should have a working "site" property', function() {
      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', 'Colombo');
      browser.pressButton('submit', function() {
          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();
    });
  })

});
9

With this additional message:
Functional Tests with Zombie.js
“before all” hook in “Functional Tests with Zombie.js”:
TypeError: bind EINVAL 0.0.0.0

10

Sorry, in order to get the tests to work with this code setup, you need to put this code back inside the root of the test suite (as per the instructions in the initial zombie setup challenge): https://www.freecodecamp.org/learn/quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser

I’ve just copied and pasted your code into my repl again and it passes with no errors when I move that code inside the test suite.

11

Try using 0.0.0.0:3000 for the site.

Browser.site = 'http://0.0.0.0:3000';
1 Like
12

Thank you! I’ve eventually got this to work, thanks to your steer and changing the Browser.site declaration (on localhost) to:

Browser.site = '0.0.0.0:3000';

I really appreciate your time helping me out. I think it would be great for freeCodeCamp to provide more guidance to users using localhost (especially given the timeout issues using replit), as this bug is quite frustrating.

13

Thank you - this was the last piece of the puzzle. Very helpful!

14

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