편백:요소가 존재하지 않는지 테스트

편백:요소가 존재하지 않는지 테스트

체크박스를 클릭하여 Cypress의 DOM에 요소가 더 이상 없는지 테스트할 수 있습니다.누가 어떻게 하는지 제안 좀 해줄래?

//This is the Test when the check box is clicked and the element is there
cy.get('[type="checkbox"]').click();
cy.get('.check-box-sub-text').contains('Some text in this div.')

나는 위의 테스트와 정반대로 하고 싶다.그래서 다시 클릭했을 때 클래스가 있는 div가 DOM에 없어야 합니다.

이것은 효과가 있는 것 같기 때문에, .should()에 대해 조금 더 배울 것이 있습니다.

cy.get('.check-box-sub-text').should('not.exist');

또한 존재하지 않는 텍스트를 검색할 수도 있습니다.

cy.contains('test_invite_member@gmail.com').should('not.exist')

편백나무의 가 있습니다: 편백나무.0 matched elements

문서: https://docs.cypress.io/guides/references/assertions.html#Existence

.should('not.exist')DOM을 DOM

---

사용 안 함not.visible주장.6.0 미만으로 잘못 통과하지만, 현재는 정상적으로 실패합니다.

// for element that was removed from the DOM
// assertions below pass in < 6.0, but properly fail in 6.0+
.should('not.be.visible')
.should('not.contain', 'Text')

이행 매뉴얼은 이쪽:Cypress-6-0으로 이행

Cypress 6.x+ 이행

편백나무의 존재에 관한 문서에 따르면

조금 순진한 인기 있는 시도는 실패할 때까지 효과가 있을 것이고, 그 후 다시 고쳐 써야 할 것이다.그리고 또...

// retry until loading spinner no longer exists
cy.get('#loading').should('not.exist')

이것은 대부분의 사람들이 찾고 있는 타이틀 문제에는 별로 효과가 없습니다.

이것은, 떼어내는 경우에 유효합니다.하지만 만약 그게 존재하지 않기를 바란다면...사라질 때까지 재시도합니다.

단, 이 경우 요소가 존재하지 않는다는 것을 테스트하려면

네 lol.또 다른 날 두통을 겪고 싶지 않다면 이게 네가 정말 원하는 거야.

// Goes through all the like elements, and says this object doesn't exist ever
cy.get(`img[src]`)
  .then(($imageSection) => {
    $imageSection.map((x, i) => { expect($imageSection[x].getAttribute('src')).to.not.equal(`${Cypress.config().baseUrl}/assets/images/imageName.jpg`) });
})

cy.get('[data-e2e="create-entity-field-relation-contact-name"]').should('not.exist');

일부 오류 메시지가 숨겨지기 때문에 잘못된 결과를 초래할 수 있습니다.사용하는 것이 더 나을 수 있습니다.

.should('not.visible');

그런 경우에는요.

다음과 같은 이점이 있습니다.

cy.get('[data-cy=parent]').should('not.have.descendants', 'img')

★★★★★★★★★★★★★★★★★★.<div data-cy="parent">에는 이미지가 없습니다.에는 '어느 정도 '어느 정도', '어느 정도'를 설정할 수 .data-cy="something, i.e. child"하다

cy.get('[data-cy=parent]').should('not.have.descendants', '[data-cy=child]')

하시면 됩니다.get ★★★★★★★★★★★★★★★★★」containsHTML 소 html html html html html 。

<button type='button'>Text 1</button>
<button type='button'>Text 2</button>

텍스트가 다른 버튼이 2개 있고 첫 번째 버튼이 존재하지 않는지 확인하고 싶다고 가정해 봅시다.

cy.get('button').contains('Text 1').should('not.exist')

편백의 jQuery 모드를 사용하여 수행할 수도 있습니다.

assert(Cypress.$('.check-box-sub-text').length==0)

요소를 닫고 ('not.exists')를 선택했지만 DOM에 존재하기 때문에 어설션이 실패했습니다.단지 그것이 더 이상 보이지 않을 뿐이다.

그런 경우에는 ('not.visible')이 효과가 있어야 합니다.편백나무는 이제 막 사용하기 시작했어요.배울 게 많아요.

편백에 트라이캐치 플로우가 없습니다.

java-selenium에서는 보통 NoSuchElement를 추가합니다.예외로 우리 사건을 처리해UI에 일부 역할 기반 액세스 케이스의 요소가 표시되지 않는 경우.

아래 코드도 사용할 수 있습니다.

expect(opportunitynametext.include("Addon")).to.be.false

또는

should('be.not.be.visible')

또는

should('have.attr','minlength','2')

투표 요소는 맞지만 안티 패턴을 사용하지 않는 것이 좋습니다. 왜일까요?네, 왜냐하면요.

1. 응용 프로그램에서 동적 클래스 또는 변경된 ID를 사용할 수 있습니다.
2. 셀렉터가 CSS 스타일 또는 JS 동작에 대한 개발 변경에서 벗어나게 됩니다.다행히 이 두 가지 문제를 모두 방지할 수 있습니다.
3. 다음과 같은 CSS Atribute에 근거해 요소를 타겟으로 하지 말아 주세요.id,class,tag
4. 자신의 위치를 변경할 수 있는 요소를 대상으로 삼지 마십시오.textContent
5. 더하다data-*요소를 보다 쉽게 대상으로 지정할 수 있는 속성

예제:

<button id="main" name="submission" role="button" data-cy="submit">Submit</button>

또, 보다 구체적이고 복수의 실렉터를 특정하고 싶은 경우는, 항상 사용하는 것이 좋습니다..should쇠사슬.

예제:

cy.get("ul").should(($li) => {
    expect($li).to.be.visible
    expect($li).to.contain("[data-cy=attribute-name]")
    expect($li).to.not.contain("text or another selector")
  })

내 경우엔, 사이프레스가 너무 빨랐고, 그렇게 단순했어.should('not.be.visible')테스트에 합격하고 나서, 로더가 표시되어 테스트에 실패했습니다.

저는 이것으로 성공을 거두었습니다.

cy.get('.loader__wrapper')
  .should('be.visible')
cy.get('.loader__wrapper', { timeout: 10000 })
  .should('not.be.visible')

또, 애플리케이션의 로드가 4 초를 넘는 경우는, 타임 아웃을 10 초로 설정하는 것도 좋습니다.

다음을 사용합니다.

cy.get('.check-box-sub-text').should('not.be.visible');

이것은 보다 안전하다.

cy.get('.check-box-sub-text').should('not.exist');

( 요소는 DOM에 표시될 수 있지만 디스플레이에는 표시되지 않습니다.none 또는 opacity: 0 )

언급URL : https://stackoverflow.com/questions/48915773/cypress-test-if-element-does-not-exist