https://cypress.io logo
Join Discord
Powered by
# help
  • f
    but I think I just found a better way
  • s
    Cypress.Commands.add is what you want
  • s
    then you can add it to the chain
  • s
    Kk
  • f
    arhh.. looks also quite useful
  • f
    My new way is using the 
    beforeEach
    and 
    afterEach
    where the latter is doing the assertion
  • f
    I know the 
    afterEach
    is commonly used to clean up
  • f
    but I have a 
    let expectedCartState
    outside that I just assign at the end of each 
    it()
  • f
    every time I solve something I always step up the challenge 🧑‍🚒 Got some divs each with a button in. The buttons have the same text and I would like to control which button I grap.
    Copy code
    ts

<div>
 <div>
   ....
    <div>
      <h2>This text is different from in each component</h2>
    </div>
   ...
 </div>
  <div>
   ....
    <div>
      <button>SAME TEXT FOR EACH BUTTON</button>
    </div>
   ...
 </div>
</div>
  • f
    I just tried
    Copy code
    ts
cy.get('div')
        .contains(dishOne.title)
        .within(() => cy.get('button').contains('LÄGG TILL'))
        .as('ADD DISH ONE')
  • f
    but that's graping the nearst 
    div
  • f
    what's the best way to traverse out?
  • f
    is it to get the 
    h2
    then use 
    parents()
    to get to outer 
    div
    and then go in to the 
    button
    ?
  • f
    or is there already a cypress command for this type work?
  • f
    I see that I can perhaps grap the outer by partial matching the class name for that (using css modules so can't do a full match) and then use a 
    .find
    tried (not working): 
    cy.get('*[class^="DishCard"]').contains(dishOne.title).find('button').as('ADD DISH ONE')
  • s
    I would personally just modify the node to have a data-testid or data-cy selector
  • s
    Using siblings and complex selectors makes your tests really brittle
  • f
    Copy code
    ts
beforeEach(() => {
      const CartState = () => {
        const { cartItems } = useCart()
        return <ContextConsumer name="Cart" state={cartItems} />
      }

      mount(
        <>
          <GlobalStyle />
          <CartProvider>
            <MenuProvider>
              <SoldOutProvider>
                <SideBySide>
                  <DishCard id={dishOne.id} data-testid="dishOne" />
                  <DishCard id={dishTwo.id} />
                </SideBySide>
                <CartState />
              </SoldOutProvider>
            </MenuProvider>
          </CartProvider>
        </>
      )

      cy.findByTestId('dishOne').find('button').as('ADD DISH ONE')
    })
  • f
    I like the idea - just not working
  • f
    cy.get('[data-testid="dishOne"]').find('button').as('ADD DISH ONE')
    - not working either
  • f
    cy.get('[data-testid="dishOne"]').within(() => cy.get('button').as('ADD DISH ONE'))
    not working
  • u
    Can your 
    data-testid
    be dynamically set on the button itself?
  • f
    arhh.. found the issue
  • f
    forgot to add the prop that puts in the 
    data-testid
  • f
    thanks for the help!
  • f
    just a quick note: it's only working for the 
    within()
    attempt and not for the 
    find()
  • s
  • f
    It should be the same, right?
  • s
    I suppose I need the example in its entirety. It's a bit hard to read what you mean.
  • f
    I can make a quick example repo - is there a boilerplate repo that is bootstrapped with cypress component testing?
1...121314...252Latest