Как подобрать элементы из вложенного "div"

Question

У меня есть следующие элементы, которые нужно собрать в кипарисе.

render(){
        return(
            <div id = "d1">
                {this.state.data.map(
                (data,index) => (
                    <div id = "d2">
                        <h1 id = "txt1"> {data.title} </h1><br/><h2 id = "txt2">{data.author}</h2><br/><span id = "txt3">{data.article}</span><hr/>
                    </div>
                )
                )}
            </div>
        )
    }

Сейчас я изучаю кипарис.Я не совсем уверен, как подобрать элементы из div.то есть внутренние элементы div и title и header.

Answer 1

cy.get("#d1") получит вам div.cy.get("#txt1") получит заголовок. Если вы хотите утверждать, что заголовок - это то, что вы ожидаете (или что-то еще об элементах), вы можете добавить .should()

cy.get("#txt1")
  .should("contain", "Your title here")

Answer 2

Чтобы найти title из h1, вы можете попробовать следующий код.Внутри одинаковой скобки вы должны указать имя «реального заголовка» для проверки в части подтверждения:

cy.get('#d2>h1').invoke('text')
      .then((text)=>{
        const title = text;
        expect(title).to.equal("typeherethedata.title");        
      })

или

cy.get('#txt1').invoke('text')
          .then((text)=>{
            const title = text;
            expect(title).to.equal("typeherethedata.title");        
          })