webdriverIO에서 돔조작 패턴

webdirverIO에서 브라우저를 조작해서 e2e테스트를 하면서 배운부분들을 정리해봤다.

컨트롤할 DOM(Login화면)

<form method="post" action="/auth/form">
  <div class="form-group">
    <label>Username</label>
    <input type="text" class="form-control" name="username" value="" />
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" name="password" />
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

컨트롤할 DOM(Login한 상태화면)

<div>
    <a class="btn btn-default" href="/players/snapshots">download</a>
    <button class="btn btn-warning" id="btn-upload">upload</button>
    ファイル: <input id="snapshot_file" type="file" name="file" style="display: inline;" />
</div>

<a class="btn btn-default" href="/logout">API Logout</a>

debug용 크롬 기동하는 방법

./node_modules/.bin/wdio repl chrome

특정 브라우저에 억세스 하는방법

browser.url("https://localhost:8090");

텍스트필드에 값넣는 방법(user에test password에password라는 텍스트 입력)

browser.setValue('input[name=username]', "test");
browser.setValue('input[name=password]', "password");

버튼 클릭하는 방법

dom의 속성으로 접근하는 방법

browser.element('button').click();

텍스트를 이용해서 엘리먼트에 접근방법

browser.element("=API Logout").click()

첨부파일 업로드 하는법

#절대패스에 있는 파일 업로드
browser.chooseFile('#snapshot_file', '/Users/xx/Downloads/xx.json');
#현재 디렉토리에 있는 파일 업로드하는 예
browser.chooseFile('#snapshot_file', './files/xx.json')

#※ ~/ 를 사용하면 에러가 났음

도큐멘트 choseFile를 참고

다이어로그 창떴을때 넘어가는 법

browser.alertAccept();

도큐멘트 alertAccept를 참고