54 lines
3.1 KiB
Markdown
54 lines
3.1 KiB
Markdown
---
|
|
id: 587d824f367417b2b2512c5c
|
|
title: Run Functional Tests using a Headless Browser
|
|
challengeType: 2
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>.
|
|
In the next challenges we are going to simulate the human interaction with a page using a device called 'Headless Browser'.
|
|
A headless browser is a web browser without a graphical user interface. These kind of tools are particularly useful for testing web pages as they are able to render and understand HTML, CSS, and JavaScript the same way a browser would.
|
|
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
For these challenges we are using Zombie.JS. It's a lightweight browser which is totally based on JS, without relying on additional binaries to be installed. This feature makes it usable in an environment such as Glitch. There are many other (more powerful) options.<br>
|
|
Look at the examples in the code for the exercise directions Follow the assertions order, We rely on it.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: All tests should pass
|
|
testString: getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })
|
|
- text: assert that the headless browser request succeeded
|
|
testString: getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.assertions[0].method, 'browser.success'); }, xhr => { throw new Error(xhr.responseText); })
|
|
- text: assert that the text inside the element 'span#name' is 'Cristoforo'
|
|
testString: getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.assertions[1].method, 'browser.text'); assert.equal(data.assertions[1].args[0], '\'span#name\''); assert.equal(data.assertions[1].args[1], '\'Cristoforo\'');}, xhr => { throw new Error(xhr.responseText); })
|
|
- text: assert that the text inside the element 'span#surname' is 'Colombo'
|
|
testString: getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.assertions[2].method, 'browser.text'); assert.equal(data.assertions[2].args[0], '\'span#surname\''); assert.equal(data.assertions[2].args[1], '\'Colombo\'');}, xhr => { throw new Error(xhr.responseText); })
|
|
- text: assert that the element 'span#dates' exist and its count is 1
|
|
testString: getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.assertions[3].method, 'browser.element'); assert.equal(data.assertions[3].args[0], '\'span#dates\''); assert.equal(data.assertions[3].args[1], 1);}, xhr => { throw new Error(xhr.responseText); })
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
// solution required
|
|
```
|
|
|
|
</section>
|