Toughman, Author at Toughman's Blog - 177 중 42 번째 페이지

개요

최근 마우스를 많이 사용하는 작업을 하니 클릭하는 손가락에 무리가 가는 것 같았습니다. 그래서 가능하면 모든 작업을 키보드로 하려고 마음을 먹었습니다. 개발용 에디터는 거의 모든 기능을 키보드만으로 해결할 수 있었습니다.

문득 ‘브라우징을 키보드만으로 할 수는 없을까?’ 라는 생각이 들었습니다. 일부 사이트는 메뉴에 단축키를 부여해서 편의를 제공하지만 각 링크는 마우스로 클릭해야만 합니다. 이리저리 알아보던 중 키보드로만 브라우징 할 수 있는 확장 프로그램인 Vimium 이 있었습니다.

Vimium

웹 스토어에서 Vimium 을 검색하시거나 여기 에서 확인하실 수 있습니다. Vim 에디터 처럼 명령어를 입력해서 브라우징을 할 수 있도록 해 주는 확장 프로그램 입니다. Vim 에디터 명령을 몰라도 사용하는데는 문제가 없습니다.

Vimium을 설치하시고 사이트 억세스 항목에서 원하시는 대로 설정하시면 됩니다. 필자는 모든 사이트에서로 설정했습니다.

Vimium 을 활성화 하면 경우에 따라 새로고침 하겠냐는 메시지가 나오는데 새로고침 합니다. 활성화되면 키보드로 브라우징을 할 수 있습니다. 모든 사이트에서 작동하는 것은 아닙니다. 메인화면에서는 작동하지 않는데 상세 페이지에서는 작동할 수도 있습니다. ? 키를 눌러보면 다음과 같은 화면이 나타납니다. 여러가지 기능이 있음을 알 수 있습니다.

필자는 주로 화면 스크롤, 링크 열기, 뒤로가기 정도를 주로 사용합니다. f 혹은 F(새탭으로 오픈) 를 눌러보면 각 링크에 알파벳이 나타나는 것을 확인할 수 있습니다. 생각보다 링크가 많은 것을 알 수 있습니다.

이 상태에서 선택하고자 하는 링크의 알파벳을 차례로 입력하면 됩니다. 예를 들어 증권으로 가고 싶다면 sc 라고 입력하면 됩니다. 전환된 화면에서 j, k 키로 위아래 스크롤 하고 H(shift + h) 키로 이전화면으로 돌아갈 수 있습니다. 조금만 사용해보면 쉽게 익숙해집니다.

자주 방문하는 사이트에서 키보드만으로 브라우징할 수 있도록 도와주는 Vimium 확장 프로그램에 대해 알아보았습니다. 편하게 브라우징 하시는데 도움이 되었으면 좋겠습니다.

개요

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

Cypress

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

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

게시판 글쓰기 테스트

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

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

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

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

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

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

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

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

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

Toughman's Blog

프로그래밍, 인터넷 구매 물품, 수필, 사진첩, 낙서장 등등…

글쓴이 보관물: Toughman

크롬에서 키보드로 브라우징 하기(Vimium 확장 프로그램)

개요

Vimium

Cypress 를 이용한 웹 화면 테스트

개요

Cypress

게시판 글쓰기 테스트