Hello everyone! I was inspired to write this article by the fact that there’s no official documentation on pattern implementation in . You might find some articles online, but I find them imperfect - I’ve got a thing or two to add. Page Elements (PE) Cypress This one is not so well-known as , so you probably never heard about it before. Usually, being implemented in pair with , not separately. Page Object Model (POM) Page Elements Page Object Model WHAT’S PAGE ELEMENTS? is a test automation programming (or design) pattern. It’s built on top of (don’t repeat yourself) principle in software development. Page Elements (PE) DRY As it’s a design pattern and it’s not unique for every web automation tool, no wonder there are no official docs for that as well ☝️ Cypress Key concepts of are: PE A lot of elements in web applications are usually very similar, for example: Modal dialogs/windows. Forms. Cards Page Element is represented as a class. Sub-element (like button/input inside of a card) = DOM tree element, class attribute. Method = sequence of actions within the element. IMPLEMENTATION Here’s an with tests for . If you’ve been following my previous article, it’d probably worth to see what’s changed from there. example GitHub repo Swag Labs example web app take a look at the PR instead Create a folder for your , preferably name it and place it in your directory, like this: Page Elements elements cypress Create inside of folder - as the name says, it’s a top navigation bar from the app: navbar.js elements Create class inside of and fill it with selectors: Navbar navbar.js class Navbar {
  get menu() {return cy.get('#react-burger-menu-btn')}
  get cart() {return cy.get('#shopping_cart_container')}
}

export default new Navbar() Now there’s 2 ways to use such elements in your tests… A) Combine it with your - simply add it as a property for your page classes: Page Objects import Page from './page'
import Navbar from '../elements/navbar'

class ProductsPage extends Page {
  navbar = Navbar

  open() {
    return super.open('/inventory.html')
  }
}

export default new ProductsPage() And then call it in tests from the page: import ProductsPage from '../pages/products.page' // import page that includes page element
...

describe('Items', () => {
  ...

  it('Navigate to Cart from the navbar', () => {
    ProductsPage.navbar.cart.click() // click page elements on the page
    ...
  })
}) B) Use it directly in tests: import Navbar from '../elements/navbar' // import page element directly in tests
...

describe('Items', () => {
  ...

  it('Navigate to Cart from the navbar', () => {
    Navbar.cart.click() // interact with imported page element
  })
}) And that’s pretty much it ☝️ WHY SHOULD I USE IT? Big page objects Sometimes elements like navigation bar are big - they have more than a few sub-elements within (links, icons and etc). If you put too many stuff in your page objects - they get big soon, i.e.: class SomePage {
  selector1,
  ...
  selector9001

  method1,
  ...
  method1337
} Elements are not everywhere If we take the same website for example - you’ll see that navigation bar doesn’t appear on the page, but DO appear on other pages… SWAG LABS Sign In It means that there’s no place for navigation bar in our base page class (i.e. ), because it’d make this element available on ALL pages. page.js Page Elements pattern lets us add elements where we need them by simply calling stored class and not duplicating code. ONLY

Understanding Promises in JavaScript

Writing Better Tests With Cypress' Page Object Model

Nominated for 2022 - HackerNoon Contributor of the Year - Automation

Too Long; Didn't Read

Make resilience your competitive advantage

Writing Better Tests With Cypress' Page Elements

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Common Beginner Mistakes in Test Automation

10 Indications That You Should Invest in Automation Via APIs

10 Commandments for AI-Assisted Social Media Marketers

11 Best Automation Testing Tools to Try in 2021

12 Use Cases of AI and Machine Learning In Finance

5 Common Beginner Mistakes in Test Automation

10 Indications That You Should Invest in Automation Via APIs

10 Commandments for AI-Assisted Social Media Marketers

11 Best Automation Testing Tools to Try in 2021

12 Use Cases of AI and Machine Learning In Finance

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps