add alias slides (#256)

Author: bahmutov

cypress/integration/11-retry-ability/answer.js

@@ -202,3 +202,37 @@ describe('Careful with negative assertions', { retries: 2 }, () => {
     cy.get('.loading').should('not.be.visible')
   })
 })
+
+describe('aliases', () => {
+  context('are reset before each test', () => {
+    before(() => {
+      cy.wrap('some value').as('exampleValue')
+    })
+
+    it('works in the first test', () => {
+      cy.get('@exampleValue').should('equal', 'some value')
+    })
+
+    // NOTE the second test is failing because the alias is reset
+    it.skip('does not exist in the second test', () => {
+      // there is not alias because it is created once before
+      // the first test, and is reset before the second test
+      cy.get('@exampleValue').should('equal', 'some value')
+    })
+  })
+
+  context('should be created before each test', () => {
+    beforeEach(() => {
+      // we will create a new alias before each test
+      cy.wrap('some value').as('exampleValue')
+    })
+
+    it('works in the first test', () => {
+      cy.get('@exampleValue').should('equal', 'some value')
+    })
+
+    it('works in the second test', () => {
+      cy.get('@exampleValue').should('equal', 'some value')
+    })
+  })
+})

slides/11-retry-ability/PITCHME.md

@@ -5,6 +5,7 @@
 - deep dive into assertions
 - built-in command waits
 - retry-ability 🔑
+- aliases
 
 +++
 
@@ -471,7 +472,56 @@ cy.get('@some-method')
   .should('have.been.calledOnce)
 ```
 
+---
+## Aliases
+
+Values and DOM elements can be saved under an alias using [.as](https://on.cypress.io/as) command.
+
+Read the guide at [https://on.cypress.io/variables-and-aliases](https://on.cypress.io/variables-and-aliases)
+
++++
+
+```js
+before(() => {
+  cy.wrap('some value').as('exampleValue')
+})
+
+it('works in the first test', () => {
+  cy.get('@exampleValue').should('equal', 'some value')
+})
+
+// NOTE the second test is failing because the alias is reset
+it('does not exist in the second test', () => {
+  cy.get('@exampleValue').should('equal', 'some value')
+})
+```
+
+**Note** aliases are reset before each test
+
 +++
+
+![Failing second test due to an alias defined in before hook](./img/alias-does-not-exist.png)
+
++++
+
+**Solution:** create aliases using `beforeEach` hook
+
+```js
+beforeEach(() => {
+  // we will create a new alias before each test
+  cy.wrap('some value').as('exampleValue')
+})
+
+it('works in the first test', () => {
+  cy.get('@exampleValue').should('equal', 'some value')
+})
+
+it('works in the second test', () => {
+  cy.get('@exampleValue').should('equal', 'some value')
+})
+```
+
+---
 ## 📝 Take away
 
 Most commands have built-in sensible waits:

slides/11-retry-ability/img/alias-does-not-exist.png

@@ -2,6 +2,8 @@
 
 - [github.com/cypress-io/testing-workshop-cypress](https://github.com/cypress-io/testing-workshop-cypress)
 
+Jump to: [00-start](?p=00-start), [01-basic](?p=01-basic), [02-adding-items](?p=02-adding-items), [03-selector-playground](?p=03-selector-playground), [04-reset-state](?p=04-reset-state), [05-xhr](?p=05-xhr), [06-app-data-store](?p=06-app-data-store), [07-ci](?p=07-ci), [08-dashboard](?p=08-dashboard), [09-reporters](?p=09-reporters), [10-configuration](?p=10-configuration), [11-retry-ability](?p=11-retry-ability)
+
 +++
 ## Gleb Bahmutov, PhD