[Cypress] 요소를 찾을 수 없는 경우

- Expected to find element: , but never found it.

1. 요소가 렌더링되지 않았을 수 있음: Cypress는 테스트 중에 DOM 요소를 찾으려고 할 때 해당 요소가 렌더링되어 있어야 합니다. 그렇지 않으면 요소를 찾지 못할 수 있습니다. 코드를 보면 npm start를 실행하는 beforeEach() 훅이 있습니다. 이렇게 하면 응용 프로그램이 시작되고 렌더링되기 전에 테스트가 시작될 수 있습니다. 이 경우 Cypress는 해당 요소를 찾을 수 없을 수 있습니다.
2. Cypress의 기다리는 방식 이용: Cypress는 기본적으로 명령이 완료될 때까지 기다리지만 명시적인 기다리기 없이는 비동기적으로 로딩되는 요소를 찾는 데 문제가 발생할 수 있습니다. cy.wait()를 사용하여 요소가 완전히 로드될 때까지 기다릴 수 있습니다.
3. 클래스 이름이 변경되었을 수 있음: 코드를 보면 React 컴포넌트의 클래스 이름을 사용하여 요소를 찾고 있습니다. 그러나 클래스 이름이 변경되었거나 템플릿이 업데이트되어 Cypress가 클래스를 올바르게 인식하지 못할 수 있습니다.
4. Cypress의 설정 문제: 가끔은 Cypress의 환경 설정 문제가 이러한 문제의 원인이 될 수 있습니다. Cypress의 설정을 확인하여 문제를 해결할 수 있습니다.

describe('template spec', () => {
  beforeEach(() => {
    cy.exec('npm start');
    cy.visit('http://localhost:3000');
    cy.wait(2000);
  });


//title, descripton입력하고 체크버튼 누르면 todolist에 추가  
  it('Todo입력하기', () => {
    cy.get('.buttons .addBtn').click();
    cy.get('.form input').type('제목');
    cy.get('.form textarea').type('글내용');
    cy.get('.checkBtn').click();
  })

 

cy.wait()를 사용하여 Cypress가 특정 동작이나 요소가 로드되기를 기다리도록 할 수 있습니다

 

페이지가 로드되기를 기다리기: 페이지가 로드되기를 기다리려면 cy.wait()를 사용하여 Cypress가 페이지 로드를 기다리도록 할 수 있습니다. 예를 들어, cy.visit()로 페이지를 방문한 후에 cy.wait()를 사용하여 페이지가 완전히 로드되기를 기다릴 수 있습니다.

beforeEach(() => { cy.visit('your_page_url'); cy.wait(2000); // 페이지 로드를 위해 2초간 기다림 });

 

요소가 나타나기를 기다리기: 어떤 요소가 화면에 나타나기를 기다리려면 cy.wait()를 사용하여 해당 요소가 로드되기를 기다릴 수 있습니다. 이것은 특히 비동기적으로 로딩되는 요소에 유용합니다.

it('should wait for an element to appear', () => { 
	cy.get('.your-element').should('exist'); // 해당 요소가 존재하는지 확인 cy.wait(1000);
    // 요소가 나타날 때까지 1초간 기다림
});

 

이처럼 cy.wait()를 사용하여 Cypress가 특정 동작이나 요소가 로드되기를 기다리도록 설정

 

• It is unsafe to chain further commands that rely on the subject after this command. It is best to split the chain, chaining again from `cy.`

Cypress에서 명령 체인을 연속해서 사용할 때 발생합니다. 일반적으로 이것은 Cypress의 비동기 작업과 관련이 있습니다. Cypress 명령은 자체적으로 비동기적으로 실행되기 때문에, 명령 체인 내에서 뒤따르는 명령이 실행되기 전에 이전 명령이 완료되지 않을 수 있습니다. 이러한 이유로 Cypress는 명령 체인 내에서 추가적인 명령을 연결하는 것을 제한합니다.

이러한 에러를 해결하는 방법은 다음과 같습니다.

 

1. 명령 분리: 명령 체인을 분리하고 다른 cy.로 시작하는 새로운 체인을 만듭니다. 예를 들어, 다음과 같이 체인을 분리할 수 있습니다.

cy.get('.element').click(); 
// 이 명령은 이전 명령이 완료될 때까지 기다립니다. 
cy.get('.other-element').should('be.visible'); 
// 새로운 체인은 이전 명령과 별개로 실행됩니다.

 

2. 콜백 함수 사용: 이전 명령이 완료될 때까지 기다리기 위해 .then()을 사용하여 콜백 함수를 전달할 수 있습니다.

cy.get('.element').click().then(() => { 
	cy.get('.other-element').should('be.visible'); 
	// 이 명령은 이전 명령이 완료된 후에 실행됩니다. 
});​

 

3. 대기 시간 추가: 필요한 경우, 명령 간에 대기 시간을 추가하여 Cypress가 이전 명령이 완료될 때까지 기다리도록 합니다.

cy.get('.element').click(); 
// 이 명령은 이전 명령이 완료될 때까지 기다립니다. 
cy.wait(1000); // 이 명령은 대기 시간을 제공합니다. 
cy.get('.other-element').should('be.visible'); 
// 새로운 체인은 이전 명령과 별개로 실행됩니다.