BDD UI testing

BDDUI Testing

Qué veremos?● BDD● Cucumber● Gherkin● Mini Prueba

Y si pudieras escribir tus tests así:Scenario: Accessing the home page

Given a user that wants to rent a car

And a list of cars to rent

When the user access the "/welcome" page

Then they can see the list of cars

And each car should display the following fields:

| a picture |

| a name |

| a description |

| an availability identifier |

| and a price |

BDDBehaviour Driven Development

BDD● Metodología de desarrollo de software, similar a TDD.

● Sirve de comunicación entre el cliente y los desarrolladores.

● Se enfoca en el fondo, no en la forma.

Ventajas● Buen comienzo para aprender a hacer pruebas.

● El mismo cliente puede escribir las pruebas, o al menos verificarlas y entenderlas.

● Pueden servir como criterios de aceptación.

Por qué BDD UI Testing?● Garantiza que los requerimientos del cliente se cumplan.

● Ayuda a detectar daños realizados tras haber hecho cambios en la aplicación.

● Es más fácil definir casos de usos usando backgrounds.

Desventajas● Pueden fallar por causas ajenas a ti o a tu aplicación.

● No le importa la calidad del código.

● Dependen del correcto funcionamiento de la aplicación completa.

Componentes

Gherkin Cucumber Protractor Chai

Gherkin

Gherkin● Lenguaje de dominio específico (solo sirve para una

cosa).

● Describe los componentes que conforman la aplicación.

● Solo describe como debe de funcionar la aplicación. No corre las pruebas.

Gherkin● Feature● Scenario● Steps● Backgrounds

Gherkin - Step definitions

Given When Then● And● And● But

● And● And● But

● And● And● But

Feature: Multiple site support As a Mephisto site owner I want to host blogs for different people In order to make gigantic piles of money

Background: Given a global administrator named "Greg" And a blog named "Greg's anti-tax rants" And a customer named "Dr. Bill" And a blog named "Expensive Therapy" owned by "Dr. Bill"

Scenario: Dr. Bill posts to his own blog Given I am logged in as Dr. Bill When I try to post to "Expensive Therapy" Then I should see "Your article was published."

Scenario: Dr. Bill tries to post to somebody else's blog, and fails Given I am logged in as Dr. Bill When I try to post to "Greg's anti-tax rants" Then I should see "Hey! That's not your blog!"

Scenario: Greg posts to a client's blog Given I am logged in as Greg When I try to post to "Expensive Therapy" Then I should see "Your article was published."

Cucumber

● Feature files● World● Step definitions● Hooks

Cucumber

Protractor

● Hace la integración entre las pruebas y el browser.

● Provee un WebDriver que permite controlar cualquier interacción con el browser.

Protractor

Protractor - Ejemplo

browser.get('http://example.com');

element(by.css('form input[type=search]')).sendKeys('Hello');

element(by.css('form button')).click();

browser.sleep(1000);

expect(element.all(by.css('.result')).count()).toBe(5);

Preguntas?

Imágenes: http://princesscheeto.tumblr.com/