카테고리 보관물: 개발

Android postDelayed 순서대로 실행

댓글 남기기

개요

안드로이드 앱 개발 시 일정시간 지연 후 무엇인가를 실행해야 하는 경우가 있습니다. postDelayed 를 이용하면 가능합니다. 자세한 설명은 이곳에서 확인하실 수 있습니다. 예제 코드는 다음과 같습니다.

Handler(Looper.getMainLooper()).postDelayed({
    //Do something
}, delay)

delay 는 Milisecond 단위이고 1000 이 1초에 해당합니다.

postDelayed 순서대로 실행

그런데 가끔 작업을 일정한 시간이나 불규칙한 시간 간격으로 실행해야 하는 경우가 있습니다. 예를 들어 1초, 3초 후 실행한다고 가정해 보겠습니다. 아마 다음과 같이 코드를 작성하게 될 것 입니다.

Handler(Looper.getMainLooper()).postDelayed({
    //Do something
}, 1000) //1초 후 실행

Handler(Looper.getMainLooper()).postDelayed({
    //Do something
}, 3000) //3초 후 실행

실제로는 의도한 대로 동작하지 않습니다. 앞의 코드가 끝난 후 뒤쪽의 코드가 실행되는 것이 아니기 때문입니다. 1초 후 실행은 정상적으로 동작합니다. 뒤쪽의 코드는 실행시간을 기준으로 4초 후가 아닌 3초 후 실행됩니다.

특정한 시간을 기준으로 누적되는 시간으로 적용해 주어야 의도한 대로 실행됩니다. 다음과 같은 코드형태가 됩니다.

Handler(Looper.getMainLooper()).postDelayed({
    //Do something
}, 1000) //1초 후 실행

Handler(Looper.getMainLooper()).postDelayed({
    //Do something
}, 4000) //위쪽 코드 실행 후 3초 후 실행

이번글에서는 postDelayed를 순서대로 실행하는 방법을 알아보았습니다.

Cypress 를 이용한 웹 화면 테스트

댓글 남기기

개요

웹 개발을 진행할 때 기능이 완료되면 기본적으로 개발자가 테스트를 진행하게 됩니다. 테스트를 꼭 해야하는데 지루하고 반복적인 하기 싫은 과정입니다. 특히 입력화면을 테스트 할 때 필요한 값을 입력하고 선택하고 버튼을 클릭해서 실제 사용자가 사용하는 것 처럼 여러번 반복해야 합니다. 이런 귀찮은 작업을 자동화할 수 있는 Cypress 가 있습니다.

Cypress

Cypress 는 브라우저에서 동작하는 것을 테스트 할 수 있는 프로그램(프레임워크)입니다. Selenium 과 비슷한 역할을 한다고 이해하시면 됩니다. Selenium 이 더 오래되었지만 개인적으로는 Cypress 가 Javascript 를 사용해서 스크립트를 작성할 수 있어 더 접근성이 좋다고 생각됩니다.

화면내에 있는 항목을 위치로 판단하는 것이 아니라 이름이나 아이디로 직접 참조하는 방식입니다. 참조 후 글자를 입력하거나 선택, 클릭 등 여러가지 동작을 적용할 수 있습니다.

게시판 글쓰기 테스트

간단한 게시판 글쓰기 화면이 있다고 가정하고 간단하게 테스트 스크립트를 작성해 보겠습니다.

설치는 이곳을 참조하셔서 진행하시면 됩니다. 개발 환경에 따라 선호하는 방식으로 설치하시면 됩니다. 필자는 윈도우용 바이너리 파일을 받아서 압축을 풀어 실행한 후 스크립트를 오픈해서 테스트를 진행하는 방식으로 하겠습니다.

Cypress 프로그램을 실행하면 다음과 같은 화면이 나타납니다.

Cypress 실행화면
Cypress 실행화면

스크립트가 있는 폴더를 드래그 하거나 선택합니다. 필자가 만든 D:\temp\cypress_board_test 폴더를 드래그 하면 다음과 같은 화면이 나타납니다.

폴더를 드래그 한 후 화면
폴더를 드래그 한 후 화면

기본적으로 예제를 포함해 줍니다. 그리고 기준이 되는 폴더 하위에 cypress 폴더가 생성됩니다. 그 하위에 integration 폴더가 생성되고 여기에 스크립트 파일을 하나 생성합니다. 그러면 다음과 같은 화면이 됩니다.

프로젝트 폴더 오픈 후 integration 폴더에 boardwrite.js 파일 생성
프로젝트 폴더 오픈 후 integration 폴더에 boardwrite.js 파일 생성

테스트 대상이 되는 화면의 소스는 다음과 같습니다. 간단한 게시판으로 생각하시면 되고 개발하고 계신 화면에 적용하셔도 됩니다.

<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 파일을 클릭하면 브라우저가 실행되면서 스크립트가 실행됩니다.

boardwrite.js 파일 실행결과
boardwrite.js 파일 실행결과

실행한 명령어의 내역이 좌측에 나타나고 우측에 지정한 주소의 화면이 나타납니다. 만일 화면내에 지정한 이름이나 아이디를 가진 항목이 없으면 다음과 같이 오류가 발생합니다. 스크립트 파일을 수정하고 저장하면 자동으로 테스트가 다시 시작됩니다.

이름이 subject1 으로 입력되어 오류가 발생한 상황
이름이 subject1 으로 입력되어 오류가 발생한 상황

어느 부분에서 오류가 발생했는지 상세하게 알려줍니다. 설명을 잘 보고 이에 따라 수정하시고 저장하시면 다시 테스트가 수행됩니다.

아주 기초적인 내용만 다루었지만 예제 파일과 문서에 있는 내용을 참조하시면 더 복잡한 테스트에도 적용하실 수 있을 겁니다. 단순 반복되는 테스트는 Cypress 에게 맡기고 창의적인 작업에 더 시간을 쓰실 수 있으면 좋겠습니다.