Timeout Error in "before all" Hook for Functional Tests with Zombie.js

Tell us what’s happening:

I’m currently working through the “Quality Assurance and Testing with Chai” challenges and I’ve hit a roadblock with the “Run Functional Tests Using a Headless Browser II” section. My tests keep failing due to a timeout error. I’ve tried adjusting the timeout settings, but it doesn’t seem to solve the problem. The console is showing a TypeError related to undefined properties, which I’m not sure how to resolve. I’m looking for some guidance on how to get past this issue so I can complete the challenges.

Your project link(s)

solution: https://boilerplate-mochachai-1–abenteuerzeit.repl.co
replit: tests/2_functional-tests.js - boilerplate-mochachai (1) - Replit

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0

Challenge Information:

Quality Assurance and Testing with Chai - Run Functional Tests Using a Headless Browser II
https://www.freecodecamp.org/learn/quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii

Problem:

I’m stuck on this code, tests are failing because of a timeout. Here’s the relevant test code:

const Browser = require('zombie');
Browser.site = 'https://boilerplate-mochachai-1--abenteuerzeit.repl.co/';

suite('Functional Tests with Zombie.js', function () {
  this.timeout(5000);
  const browser = new Browser();

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

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

  suite('"Famous Italian Explorers" form', function () {
    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.element('span#dates', 1);
        done();
      });
    });

    test('Submit the surname "Vespucci" in the HTML form', function (done) {
      browser.fill('surname', 'Vespucci').pressButton('submit', function() {
        browser.assert.success();
        browser.assert.text('span#name', 'Amerigo');
        browser.assert.text('span#surname', 'Vespucci');
        browser.assert.element('span#dates', 1);
        done();
      });
    });
  });
});

When I run the tests, I receive the following errors on the freecodecamp site:

// running tests
All tests should pass.
You should assert that the headless browser request succeeded.
You should assert that the text inside the element span#name is 'Amerigo'.
You should assert that the text inside the element span#surname is 'Vespucci'.
You should assert that the element span#dates exist and its count is 1.
// tests completed

// console output
jQuery.Deferred exception: Cannot read properties of undefined (reading '0') TypeError: Cannot read properties of undefined (reading '0')
...
[TypeError: Cannot read properties of undefined (reading '3')]

Console Output:

> automated-testing-app@0.0.1 start
> node server.js

Listening on port 3000
Running Tests...

[...Unit Tests Output...]

Functional Tests with Zombie.js
    1) "before all" hook in "Functional Tests with Zombie.js"

  22 passing (5s)
  1 failing

  1) Functional Tests with Zombie.js
       "before all" hook in "Functional Tests with Zombie.js":
     Error: Timeout of 5000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
[...]

Browser and System Details:

  • Web browser is up to date: Yes
  • JavaScript enabled: Yes
  • Cookies enabled: Yes
  • Third-Party Cookies enabled: Yes
  • Browser version: Chrome 119.0.0.0 / Edge 119.0.0.0
  • Operating System: Windows 11

The browser information, challenge information, and error messages suggest that there may be an issue with the code or the environment where the tests are running. It might not be related to the actual browser version or capabilities since the browser seems up to date and properly configured.

What I’ve tried:

  • Increasing the timeout for the tests
  • Double-checking the selectors and the names of form fields
  • Ensuring that the server is running and accessible
  • Looking through the forum for similar issues and solutions

What I need help with:

  • Understanding why the TypeError is occurring and how to fix it
  • Any suggestions on alternative ways to troubleshoot or fix timeout issues
  • If there’s a common pitfall with this challenge that I might have overlooked

I appreciate any help or advice the community can provide!

Update: Functional Tests with Headless Browser Issue Resolved

I wanted to provide an update on the previously mentioned issue with the “Run Functional Tests Using a Headless Browser II” challenge.

Resolution Steps Taken:

I made a few adjustments that seemed to resolve the test failures, though I must note the solution may not be definitive due to potential environmental factors such as server response times which can vary.

  1. Repository Organization: I eliminated a duplicate repository to avoid any conflicts that might arise from having multiple versions of the same project.
  2. Replit Name Change: Renaming my Replit project was also part of the troubleshooting process to maintain consistency.
  3. URL Correction: I updated the Browser.site URL by removing the trailing slash:
    Browser.site = 'https://boilerplate-mochachai.abenteuerzeit.repl.co';
    

Current Test Status:

Subsequent to these changes, the tests are now passing. Below is the revised test suite:

const chai = require('chai');
const assert = chai.assert;
// ... rest of the chai related code ...

const Browser = require('zombie');
Browser.site = 'https://boilerplate-mochachai.abenteuerzeit.repl.co';

// ... rest of the functional test code ...

And the corresponding output from the console:

> automated-testing-app@0.0.1 start
> node server.js

Listening on port 3000
Running Tests...

  Unit Tests
    // ... unit tests output ...

  Functional Tests
    Integration tests with chai-http
      // ... chai-http tests output ...

  Functional Tests with Zombie.js
    Headless browser
      ✔ should have a working "site" property
    "Famous Italian Explorers" form
      ✔ Submit the surname "Colombo" in the HTML form
      ✔ Submit the surname "Vespucci" in the HTML form

  25 passing (4s)

Considerations:

While the issue seems to be fixed, I remain cautious about the resolution. It’s possible that external factors such as server load or time of day could have affected the tests’ performance and outcomes. It’s worth keeping in mind that what works at one moment may not always be as reliable under different conditions.

I hope sharing this process might provide some direction for those encountering similar issues, and I welcome any further insights or alternative explanations that could shed more light on the matter.

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