0

I am kind of new to cypress and was wondering if someone can explain how to really use the # when calling for an element, I tried to find some documentation but nothing really useful.

Maybe I was looking at the wrong place? if someone could point me in the right direction. Thanks

Bruno Rodriguez
  • 65
  • 1
  • 1
  • 8

2 Answers2

3

I am also new to cypress, but '#foo' is just shorthand for '[id="foo"]'

Say you have an element

<ul id="foo" class="bar">

You can address it with #foo

cy.get('#foo')

is the same as

cy.get('[id="foo"]')

This works similar for the class.

cy.get('.bar')

is the same as

cy.get('[class="bar"]')

Maybe there is more to it, but that is how I use # and . in selectors

Peter Csala
  • 17,736
  • 16
  • 35
  • 75
cypher_null
  • 632
  • 8
  • 22
2

That's called a CSS selector, and # is an ID selector, similarly . is Class selector. Here's some references:

w3schools: https://www.w3schools.com/cssref/css_selectors.asp

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

So, by "calling for an element" I assume you wonder how exactly to pinpoint an element you want to click, and for that you have to inspect the html of your page, and figure out a proper selector that you can give to cypress in order to find your page elements.

Cypress TestRunner also provides you with Selector Playground to help you find your page elements easy: https://docs.cypress.io/guides/core-concepts/test-runner#Selector-Playground

Zaista
  • 1,272
  • 8
  • 18