Online QADay 2022 КОСТЯНТИН КЛЮЄВ «Cypress.io : Let’s go farther» telegram: wwww.t.me/goqameetup fb: www.fb.com/goqaevent fb: www.fb.com/qaday.org linkedin: https://www.linkedin.com/company/goqa/ Сайт: www.qaday.org

1. Let’s go farther…

2. Who am I ?
 QA Trainer at Start IT
 AQA Trainer at Start IT
 TPM / Lead BA at EPAM
 QA Lead at FastCTO
 Cypress.io enthusiast
 Ukraine addicted guy!
 Life Lover

3. Page Objects
Custom
Commands
Application Actions
Optimize your tests now

4. Page Objects

5. Page Objects
 Easy to reuse
 Easy to maintain
 Keeping tests free from
locators
1. Create folder 'PageObjects' folder in './cypress/support' folder
2. Add Page Object for any page you describe and call it f.e. ‘LoginPage.js’
3. Add some code, f.e. :
class LoginPage {
getUserName() {
return cy.get('#username');
}
getPassword(){
return cy.get('#pass');
}
getloginButton() {
return cy.get('.main-Button');
}
}
export default LoginPage
import HomePage from '../../support/PageObjects/LoginPage';
describe('Automation Test Suite ', function() {
....
it('Cypress Test Case', function() {
const loginPage=new LoginPage();
cy.visit('/');
loginPage.getUserName().type("admin");
loginPage.getPassword().type("admin");
homePage.getLoginButton().click();
cy.url().should('include', '/dashboard')
})
})

6. Custom Commands

7. Custom Commands
 Create custom functionalities
 Overwrite existing functionalities
 Reuse once described from test to
test
1. Go to './cypress/support'
2. Edit 'commands.js' file, or create new one
3. Don't forget to import newly created to './cypress/support/index.js'
cy.get('[data-test="username-field"]').type("Admin")
cy.get('[data-test="password-field"]').type("admin12345")
cy.get('[data-test="rememberme-checkbox"]').click()
cy.get('[data-test="login-button"]').click()
Cypress.Commands.add("getBySel", (selector) => {
return cy.get(`[data-test=${selector}]`)
})
cy.getBySel("username-field").type("Admin")
cy.getBySel("password-field").type("admin12345")
cy.getBySel("rememberme-checkbox").click()
cy.getBySel("login-button").click()

8. Application Actions

9. Application Actions
 Dispatch actions directly through
the application internal logic
 No UI interactions
 Saves your time
it('opens signup form', () => {
cy
.window()
.then(({ app }) => {
app.showLoginModule = true;
});
});

10. Questions Please

11. Bye!!!
www.facebook.com/kliuiev/
www.linkedin.com/in/kostiantynkliuiev/
t.me/kliuiev