fix(learn): Headless Browser Tests have incorrect values (#40330)
* Restructure files Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * Realign forum topic ids Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * Missed query string numbers Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * Test all previous tests Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * Fix the semi-colon Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * change test name to match boilerplate change Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
a1928ba272
commit
582d3ab93f
@ -99,15 +99,15 @@
|
||||
],
|
||||
[
|
||||
"587d824f367417b2b2512c5c",
|
||||
"Run Functional Tests using a Headless Browser"
|
||||
"Simulate Actions Using a Headless Browser"
|
||||
],
|
||||
[
|
||||
"587d8250367417b2b2512c5d",
|
||||
"Run Functional Tests using a Headless Browser II"
|
||||
"Run Functional Tests Using a Headless Browser"
|
||||
],
|
||||
[
|
||||
"5f8884f4c46685731aabfc41",
|
||||
"Simulate Actions Using a Headless Browser"
|
||||
"Run Functional Tests Using a Headless Browser II"
|
||||
]
|
||||
],
|
||||
"helpRoom": "Help",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d8250367417b2b2512c5d
|
||||
title: Run Functional Tests using a Headless Browser II
|
||||
id: 5f8884f4c46685731aabfc41
|
||||
title: Run Functional Tests Using a Headless Browser II
|
||||
challengeType: 2
|
||||
forumTopicId: 301594
|
||||
---
|
||||
@ -9,43 +9,18 @@ forumTopicId: 301594
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
In the HTML main view we provided a input form. It sends data to the `PUT /travellers` endpoint that we used above with an Ajax request. When the request successfully completes, the client code appends a `<div>` containing the info returned by the call to the DOM. Here is an example of how to interact with this form:
|
||||
|
||||
```js
|
||||
test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
browser.fill('surname', 'Polo').pressButton('submit', function () {
|
||||
browser.assert.success();
|
||||
browser.assert.text('span#name', 'Marco');
|
||||
browser.assert.text('span#surname', 'Polo');
|
||||
browser.assert.element('span#dates', 1);
|
||||
done();
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
First, the `fill` method of the `browser` object fills the `surname` field of the form with the value `'Polo'`. Immediately after, the `pressButton` method invokes the `submit` event listener of the form. The `pressButton` method is asynchronous.
|
||||
|
||||
Then, once a response is received from the AJAX request, a few assertions are made confirming:
|
||||
|
||||
1. The status of the response is `200`
|
||||
2. The text within the `<span id='name'></span>` element matches `'Marco'`
|
||||
3. The text within the `<span id='surname'></span>` element matches `'Polo'`
|
||||
4. The there is `1` `<span id='dates'></span>` element.
|
||||
|
||||
Finally, the `done` callback is invoked, which is needed due to the asynchronous test.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, in the `'submit "surname" : "Colombo" - write your e2e test...'` test (`// #5`), automate filling-in and submitting the form:
|
||||
Within `tests/2_functional-tests.js`, in the `'submit "surname" : "Vespucci" - write your e2e test...'` test (`// #6`), automate filling-in and submitting the form from scratch:
|
||||
|
||||
1. Fill in the form
|
||||
2. Submit it pressing `'submit'` button.
|
||||
1. Fill in the form with the `surname` of `Vespucci`
|
||||
2. Submit it pressing `'submit'` button
|
||||
|
||||
Within the callback:
|
||||
|
||||
1. assert that status is OK `200`
|
||||
2. assert that the text inside the element `span#name` is `'Cristoforo'`
|
||||
3. assert that the text inside the element `span#surname` is `'Colombo'`
|
||||
1. assert that status is `200`
|
||||
2. assert that the text inside the element `span#name` is `'Amerigo'`
|
||||
3. assert that the text inside the element `span#surname` is `'Vespucci'`
|
||||
4. assert that the element(s) `span#dates` exist and their count is `1`
|
||||
|
||||
Do not forget to to remove the `assert.fail()` call.
|
||||
@ -88,7 +63,7 @@ You should assert that the text inside the element 'span#name' is 'Amerigo'.
|
||||
(data) => {
|
||||
assert.equal(data.assertions[1].method, 'browser.text');
|
||||
assert.match(data.assertions[1].args[0], /('|")span#name\1/);
|
||||
assert.match(data.assertions[1].args[1], /('|")Cristoforo\1/);
|
||||
assert.match(data.assertions[1].args[1], /('|")Amerigo\1/);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
@ -104,7 +79,7 @@ You should assert that the text inside the element 'span#surname' is 'Vespucci'.
|
||||
(data) => {
|
||||
assert.equal(data.assertions[2].method, 'browser.text');
|
||||
assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
|
||||
assert.match(data.assertions[2].args[1], /('|")Colombo\1/);
|
||||
assert.match(data.assertions[2].args[1], /('|")Vespucci\1/);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 587d824f367417b2b2512c5c
|
||||
id: 587d8250367417b2b2512c5d
|
||||
title: Run Functional Tests using a Headless Browser
|
||||
challengeType: 2
|
||||
forumTopicId: 301595
|
||||
@ -9,43 +9,46 @@ forumTopicId: 301595
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
In the next challenges we are going to simulate the human interaction with a page using a device called 'Headless Browser'.
|
||||
In the HTML main view we provided a input form. It sends data to the `PUT /travellers` endpoint that we used above with an Ajax request. When the request successfully completes, the client code appends a `<div>` containing the info returned by the call to the DOM. Here is an example of how to interact with this form:
|
||||
|
||||
A headless browser is a web browser without a graphical user interface. This kind of tool is particularly useful for testing web pages, as it is able to render and understand HTML, CSS, and JavaScript the same way a browser would.
|
||||
```js
|
||||
test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
browser.fill('surname', 'Polo').pressButton('submit', function () {
|
||||
browser.assert.success();
|
||||
browser.assert.text('span#name', 'Marco');
|
||||
browser.assert.text('span#surname', 'Polo');
|
||||
browser.assert.element('span#dates', 1);
|
||||
done();
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
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 Repl.it. There are many other (more powerful) options.
|
||||
First, the `fill` method of the `browser` object fills the `surname` field of the form with the value `'Polo'`. Immediately after, the `pressButton` method invokes the `submit` event listener of the form. The `pressButton` method is asynchronous.
|
||||
|
||||
Mocha allows You to prepare the ground running some code before the actual tests. This can be useful for example to create items in the database, which will be used in the successive tests.
|
||||
Then, once a response is received from the AJAX request, a few assertions are made confirming:
|
||||
|
||||
With a headless browser, before the actual testing, we need to **visit** the page we are going to inspect. The `suiteSetup` 'hook' is executed only once at the suite startup. Other different hook types can be executed before each test, after each test, or at the end of a suite. See the Mocha docs for more information.
|
||||
1. The status of the response is `200`
|
||||
2. The text within the `<span id='name'></span>` element matches `'Marco'`
|
||||
3. The text within the `<span id='surname'></span>` element matches `'Polo'`
|
||||
4. The there is `1` `<span id='dates'></span>` element.
|
||||
|
||||
Finally, the `done` callback is invoked, which is needed due to the asynchronous test.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, immediately after the `Browser` declaration, add your project URL to the `site` property of the variable:
|
||||
Within `tests/2_functional-tests.js`, in the `'submit "surname" : "Colombo" - write your e2e test...'` test (`// #5`), automate filling-in and submitting the form:
|
||||
|
||||
```js
|
||||
Browser.site = 'https://sincere-cone.gomix.me'; // Your URL here
|
||||
```
|
||||
1. Fill in the form
|
||||
2. Submit it pressing `'submit'` button.
|
||||
|
||||
If you are testing on a local environment replace the line above with
|
||||
Within the callback:
|
||||
|
||||
```js
|
||||
Browser.localhost('example.com', process.env.PORT || 3000);
|
||||
```
|
||||
1. assert that status is OK `200`
|
||||
2. assert that the text inside the element `span#name` is `'Cristoforo'`
|
||||
3. assert that the text inside the element `span#surname` is `'Colombo'`
|
||||
4. assert that the element(s) `span#dates` exist and their count is `1`
|
||||
|
||||
Within `tests/2_functional-tests.js`, at the root level of the `'e2e Testing with Zombie.js'` suite, instantiate a new instance of the `Browser` object with the following code:
|
||||
|
||||
```js
|
||||
const browser = new Browser();
|
||||
```
|
||||
|
||||
Then, use the `suiteSetup` hook to direct the `browser` to the `/` route with the following code:
|
||||
|
||||
```js
|
||||
suiteSetup(function(done) {
|
||||
return browser.visit('/', done);
|
||||
});
|
||||
```
|
||||
Do not forget to to remove the `assert.fail()` call.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -85,7 +88,7 @@ You should assert that the text inside the element 'span#name' is 'Cristoforo'.
|
||||
(data) => {
|
||||
assert.equal(data.assertions[1].method, 'browser.text');
|
||||
assert.match(data.assertions[1].args[0], /('|")span#name\1/);
|
||||
assert.match(data.assertions[1].args[1], /('|")Marco\1/);
|
||||
assert.match(data.assertions[1].args[1], /('|")Cristoforo\1/);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
@ -101,7 +104,7 @@ You should assert that the text inside the element 'span#surname' is 'Colombo'.
|
||||
(data) => {
|
||||
assert.equal(data.assertions[2].method, 'browser.text');
|
||||
assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
|
||||
assert.match(data.assertions[2].args[1], /('|")Polo\1/);
|
||||
assert.match(data.assertions[2].args[1], /('|")Colombo\1/);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f8884f4c46685731aabfc41
|
||||
id: 587d824f367417b2b2512c5c
|
||||
title: Simulate Actions Using a Headless Browser
|
||||
challengeType: 2
|
||||
---
|
||||
@ -8,21 +8,43 @@ challengeType: 2
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Repl.it](https://repl.it/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
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. This kind of tool is particularly useful for testing web pages, as it is able to render and understand HTML, CSS, and JavaScript the same way a browser would.
|
||||
|
||||
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 Repl.it. There are many other (more powerful) options.
|
||||
|
||||
Mocha allows you to prepare the ground running some code before the actual tests. This can be useful for example to create items in the database, which will be used in the successive tests.
|
||||
|
||||
With a headless browser, before the actual testing, we need to **visit** the page we are going to inspect. The `suiteSetup` 'hook' is executed only once at the suite startup. Other different hook types can be executed before each test, after each test, or at the end of a suite. See the Mocha docs for more information.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, in the `'submit "surname" : "Vespucci" - write your e2e test...'` test (`// #6`), automate filling-in and submitting the form from scratch:
|
||||
Within `tests/2_functional-tests.js`, immediately after the `Browser` declaration, add your project URL to the `site` property of the variable:
|
||||
|
||||
1. Fill in the form with the `surname` of `Vespucci`
|
||||
2. Submit it pressing `'submit'` button
|
||||
```js
|
||||
Browser.site = 'https://sincere-cone.gomix.me'; // Your URL here
|
||||
```
|
||||
|
||||
Within the callback:
|
||||
If you are testing on a local environment replace the line above with
|
||||
|
||||
1. assert that status is `200`
|
||||
2. assert that the text inside the element `span#name` is `'Amerigo'`
|
||||
3. assert that the text inside the element `span#surname` is `'Vespucci'`
|
||||
4. assert that the element(s) `span#dates` exist and their count is `1`
|
||||
```js
|
||||
Browser.localhost('example.com', process.env.PORT || 3000);
|
||||
```
|
||||
|
||||
Do not forget to to remove the `assert.fail()` call.
|
||||
Within `tests/2_functional-tests.js`, at the root level of the `'Functional Tests with Zombie.js'` suite, instantiate a new instance of the `Browser` object with the following code:
|
||||
|
||||
```js
|
||||
const browser = new Browser();
|
||||
```
|
||||
|
||||
Then, use the `suiteSetup` hook to direct the `browser` to the `/` route with the following code:
|
||||
|
||||
```js
|
||||
suiteSetup(function(done) {
|
||||
return browser.visit('/', done);
|
||||
});
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -30,71 +52,11 @@ All tests should pass.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional').then(
|
||||
(data) => {
|
||||
assert.equal(data.state, 'passed');
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the headless browser request succeeded.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[0].method, 'browser.success');
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the text inside the element 'span#name' is 'Amerigo'.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[1].method, 'browser.text');
|
||||
assert.match(data.assertions[1].args[0], /('|")span#name\1/);
|
||||
assert.match(data.assertions[1].args[1], /('|")Amerigo\1/);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the text inside the element 'span#surname' is 'Vespucci'.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[2].method, 'browser.text');
|
||||
assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
|
||||
assert.match(data.assertions[2].args[1], /('|")Vespucci\1/);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the element 'span#dates' exist and its count is 1.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[3].method, 'browser.element');
|
||||
assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
|
||||
assert.equal(data.assertions[3].args[1], 1);
|
||||
data.slice(0, 4).forEach((test) => {
|
||||
assert.equal(test.state, 'passed');
|
||||
})
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
|
||||
Reference in New Issue
Block a user