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

[onyangaemmanuel25]

Tell us what’s happening:
Describe your issue in detail here.
The last challenges have failed to pass
kindly advice on what is wrong with my code?

Your project link(s)

solution: boilerplate-mochachai - Replit

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

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

Link to the challenge:

freeCodeCamp.org

[JeremyLT]

Pictures of code are hard to read and cannot be copied into a local IDE for debugging. Please post your actual code or a link to your repository, instead of a picture.

[onyangaemmanuel25]

@JeremyLT boilerplate-mochachai - Replit
Here is the link

[RandellDawson]

browser.fill returns a Promise. Look carefully at the examples in this challenge. You must use the then method on the Promise.

[onyangaemmanuel25]

Even if you use the then method on the promise it doesn’t pass

[RandellDawson]

I just looked at your code again and do not see you using the then method on the Promise returned from browser.fill.

I only see:

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 "surname" : "Colombo" - write your e2e test...', 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();
      });
    });
    // #6
    test('submit "surname" : "Vespucci" - write your e2e test...', 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();
      });
    });
  });
});

[onyangaemmanuel25]

i have included the then method on the promise but nothing seems to pass at all.

[RandellDawson]

You have a typo in one of your asserts of in both tests.

[onyangaemmanuel25]

What could that be because everything seems correct as i have cross checked thoroughly and nothing

[RandellDawson]

Part of being a developer is being able to track down typos. The example in the challenge is slightly different than what you are using for one of your browser.assert methods.

HINT: You are off by one character.

[onyangaemmanuel25]

when i follow the codes keenly it’s the browser.assert.element that i think had the typo error

but when i change and submit my code still nothing succeeds and i just don’t know why?

[RandellDawson]

The correct method is elements. Using element will work too in this case because there is only one element meeting the criteria span#dates. The main point is, what datatype should browser.assert.elements 2nd argument be?

[RandellDawson]

Now you have these two lines switched:

  const browser = new Browser();
  this.timeout(5000);

[onyangaemmanuel25]

Kindly what I should I do about it am stuck?

[RandellDawson]

The this.timeout should be on the line before declaring browser.

[onyangaemmanuel25]

Finally I passed the tests though it hasn’t been easy.