개요
웹 개발을 진행할 때 기능이 완료되면 기본적으로 개발자가 테스트를 진행하게 됩니다. 테스트를 꼭 해야하는데 지루하고 반복적인 하기 싫은 과정입니다. 특히 입력화면을 테스트 할 때 필요한 값을 입력하고 선택하고 버튼을 클릭해서 실제 사용자가 사용하는 것 처럼 여러번 반복해야 합니다. 이런 귀찮은 작업을 자동화할 수 있는 Cypress 가 있습니다.
Cypress
Cypress 는 브라우저에서 동작하는 것을 테스트 할 수 있는 프로그램(프레임워크)입니다. Selenium 과 비슷한 역할을 한다고 이해하시면 됩니다. Selenium 이 더 오래되었지만 개인적으로는 Cypress 가 Javascript 를 사용해서 스크립트를 작성할 수 있어 더 접근성이 좋다고 생각됩니다.
화면내에 있는 항목을 위치로 판단하는 것이 아니라 이름이나 아이디로 직접 참조하는 방식입니다. 참조 후 글자를 입력하거나 선택, 클릭 등 여러가지 동작을 적용할 수 있습니다.
게시판 글쓰기 테스트
간단한 게시판 글쓰기 화면이 있다고 가정하고 간단하게 테스트 스크립트를 작성해 보겠습니다.
설치는 이곳을 참조하셔서 진행하시면 됩니다. 개발 환경에 따라 선호하는 방식으로 설치하시면 됩니다. 필자는 윈도우용 바이너리 파일을 받아서 압축을 풀어 실행한 후 스크립트를 오픈해서 테스트를 진행하는 방식으로 하겠습니다.
Cypress 프로그램을 실행하면 다음과 같은 화면이 나타납니다.
스크립트가 있는 폴더를 드래그 하거나 선택합니다. 필자가 만든 D:\temp\cypress_board_test 폴더를 드래그 하면 다음과 같은 화면이 나타납니다.
기본적으로 예제를 포함해 줍니다. 그리고 기준이 되는 폴더 하위에 cypress 폴더가 생성됩니다. 그 하위에 integration 폴더가 생성되고 여기에 스크립트 파일을 하나 생성합니다. 그러면 다음과 같은 화면이 됩니다.
테스트 대상이 되는 화면의 소스는 다음과 같습니다. 간단한 게시판으로 생각하시면 되고 개발하고 계신 화면에 적용하셔도 됩니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
제목 : <input type="text" name="subject" id="subject" />
</div>
<div>
글쓴이 : <input type="text" name="writer" id="writer" />
</div>
<div>
종류 : <input type="radio" name="type" id="text" />text <input type="radio" name="type" id="html" />html
</div>
<div>
<textarea rows="20"cols="80" placeholder="내용" name="content" id="content"></textarea>
</div>
<div>
<button type="button" onclick="save();" id="saveButton">등록</button>
</div>
</form>
</body>
</html>
<script>
function save() {
alert('Save click');
}
</script>
boardwrite.js 파일의 내용은 다음과 같습니다. 손에 익은 텍스트 에디터를 이용해서 수정하시면 됩니다.
describe('Write board script', () => {
it('Write board', () => {
cy.visit('https://localhost:44364/frm_write.aspx')
cy.get('input[name="subject"]').type('제목입니다.')
cy.get('input[name="writer"]').type('글쓴이')
cy.get('#html').check()
cy.get('textarea[name="content"]').type("<p>내용입니다.<br/>test</p>")
cy.get('#saveButton').click()
})
})
3행은 특정한 사이트를 방문하도록 하는 명령입니다. 개발하고 계신 주소를 입력하시면 됩니다. 4행은 이름이 subject 인 항목에 글자를 입력하라는 명령입니다. 5행도 같은 명령입니다. 6행은 html 이라는 아이디를 가진 항목을 선택하라는 명령입니다. 글을 쓰는 폼에 있는 html 항목을 선택하게 됩니다.
8행은 textarea 에 내용을 입력하는 명령입니다. 9행은 아이디가 saveButton 인 항목을 클릭하라는 명령입니다.
boardwrite.js 파일을 클릭하면 브라우저가 실행되면서 스크립트가 실행됩니다.
실행한 명령어의 내역이 좌측에 나타나고 우측에 지정한 주소의 화면이 나타납니다. 만일 화면내에 지정한 이름이나 아이디를 가진 항목이 없으면 다음과 같이 오류가 발생합니다. 스크립트 파일을 수정하고 저장하면 자동으로 테스트가 다시 시작됩니다.
어느 부분에서 오류가 발생했는지 상세하게 알려줍니다. 설명을 잘 보고 이에 따라 수정하시고 저장하시면 다시 테스트가 수행됩니다.
아주 기초적인 내용만 다루었지만 예제 파일과 문서에 있는 내용을 참조하시면 더 복잡한 테스트에도 적용하실 수 있을 겁니다. 단순 반복되는 테스트는 Cypress 에게 맡기고 창의적인 작업에 더 시간을 쓰실 수 있으면 좋겠습니다.
