freeCodeCamp/curriculum/challenges/italian/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d8250367417b2b2512c5d	Eseguire test funzionali usando un headless browser	2	301595	run-functional-tests-using-a-headless-browser

--description--

Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su Replit, o clonato da GitHub.

Nella vista principale HTML abbiamo fornito un modulo di input. Esso invia con una richiesta Ajax i dati all'endpoint PUT /travellers che abbiamo usato sopra. Quando la richiesta è completata con successo, il codice client aggiunge un <div> contenente le informazioni restituite dalla chiamata al DOM. Ecco un esempio di come interagire con questo modulo:

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.elements('span#dates', 1);
    done();
  });
}

In primo luogo, il metodo fill dell'oggetto browser compila il campo surname del modulo con il valore 'Polo'. Subito dopo, il metodo pressButton invoca l'event lister submit del modulo. Il metodo pressButton è asincrono.

Poi, una volta ricevuta una risposta dalla richiesta AJAX, vengono fatte alcune asserzioni, confermando che:

1. Lo stato della risposta è 200
2. Il testo all'interno dell'elemento <span id='name'></span> corrisponde a 'Marco'
3. Il testo all'interno dell'elemento <span id='surname'></span> corrisponde a 'Polo'
4. C'è 1 elemento <span id='dates'></span>.

Infine, viene invocata la callback done, che è necessaria a causa del test asincrono.

--instructions--

All'interno di tests/2_functional-tests.js, nel test 'submit "surname" : "Colombo" - write your e2e test...' (// #5), automatizza la compilazione e invia il modulo:

1. Compila il modulo
2. Invia premendo il pulsante 'submit'.

All'interno della callback:

1. asserisci che lo stato è OK 200
2. asserisci che il testo all'interno dell'elemento span#name è 'Cristoforo'
3. asserisci che il testo all'interno dell'elemento span#surname è 'Colombo'
4. asserisci che gli elementi span#dates esistono e il loro conteggio è 1

Non dimenticare di rimuovere la chiamata assert.fail().

--hints--

Tutti i test dovrebbero essere superati.

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
    (data) => {
      assert.equal(data.state, 'passed');
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

Dovresti asserire che la richiesta dell'headless browser sia riuscita.

(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);
    }
  );

Dovresti asserire che il testo all'interno dell'elemento 'span#name' sia 'Cristoforo'.

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').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], /('|")Cristoforo\1/);
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

Dovresti asserire che il testo all'interno dell'elemento 'span#surname' sia 'Colombo'.

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').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], /('|")Colombo\1/);
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

Dovresti asserire che l'elemento 'span#dates' esiste e il suo conteggio sia 1.

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
    (data) => {
      assert.equal(data.assertions[3].method, 'browser.elements');
      assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
      assert.equal(data.assertions[3].args[1], 1);
    },
    (xhr) => {
      throw new Error(xhr.responseText);
    }
  );

--solutions--

/**
  Backend challenges don't need solutions, 
  because they would need to be tested against a full working project. 
  Please check our contributing guidelines to learn more.
*/