TestCafe에 대해 다양한

#TestCafe를 조사한 경위
「Selenium」이외에도 사용할 수 있는 GUI 테스트 툴이 없는지, 또 Wait등의 대기 처리를 잘 할 수 없기 때문에 도중에 에러 종료해 버린다.
그리고, 조사한 곳 「Testcafe」가 발견되었다.
그렇지만, 잘 모르고, 툴명인가, 어딘가의 커피 점포명인가 생각해 버리는 시말.
Selenium에서는 「설정」이 많았던 만큼, 편해진 것 같습니다. 환경 구축에 시간이 걸렸다.
그러나 언어는 "Javascript"의 선택입니다.
#Windows판
TestCafe Studio를 사용하여 시작
무려 무료 기간이 30일로 유료란? 어느새 변했어요.



DevExpressTestCafeStudio-win-0.2.0을 실행합니다.
"설치 중"

마침 버튼을 클릭합니다.

스플래시 화면
환경에 따라서는 이 화면 그대로 진행하지 않는다.
설정 미스 : 환경 변수 (Path) 설정의 재검토도 필요하다.

PATH=$PATH:./node_modules/.bin

경로를 제대로 설정한 후 다시 시작한다.

TestCafe Studio 화면

레코드 구성 이름
Run Configuration 이름


MozillaFirefox
MozillaFirefox

Google 크롬
Google 크롬

Internet Explorer
Internet Explorer

Microsoft Edge
Microsoft Edge

여기에서는, 「Internet Explorer」를 설정해 움직여 보자.

SeleniumIDE에 있던 「Recording 기능」도 붙어 있다.

화살표 버튼을 클릭합니다.

로드가 시작됩니다.

"스플래시 화면"과 같은 "시작 브라우저 이름"과 "OS"가 표시됩니다.

「Recording 기능」하면서 움직여 본다.
"Yahoo! Top"시작


꽤 좋은 느낌으로 Wait 해줍니다.
OK인 경우
테스트 결과가 "PASSED"입니다.

NG의 경우
테스트 결과가 「FAIL」이 되고 있다.
#AWS Linux 가상 머신
AWS Linux에 TestCafe 설치
cmd

vagrant up

vagrant ssh

nodebrew 설치

[vagrant@localhost ~]$curl -L git.io/nodebrew | perl - setup
[vagrant@localhost ~]$set -o noclobber
[vagrant@localhost ~]$echo export PATH='$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc
[vagrant@localhost ~]$source ~/.bashrc

nodebrew 버전 확인

[vagrant@localhost ~]$ nodebrew -v
nodebrew 1.0.0
nodebrewを使ってNode.jsをインストール

[vagrant@localhost ~]$ nodebrew install-binary latest
[vagrant@localhost ~]$ nodebrew use latest
[vagrant@localhost ~]$ node -v
v10.1.0
[vagrant@localhost ~]$ npm -v
6.1.0
[vagrant@localhost ~]$ npm install -g testcafe

실행 test1.js 준비

test1.js
import { Selector } from 'testcafe';

fixture `test`
    .page `https://XXXXXXXXXXXXXX/login`;

test('New Test', async t => {
    await t
        .click(Selector('.notice-wrapper'))
        .typeText(Selector('#login').find('[name="login_address"]'), 'd')
        .pressKey('backspace')
        .typeText(Selector('#login').find('[name="login_address"]'), 'XXXXXXX      .pressKey('tab')
        .typeText(Selector('#password'), 'XXXXXX')
        .click(Selector('.btn-blue-lg'))
        .click(Selector('.login'))
        .selectText(Selector('#login').find('[name="login_address"]'), 22, 0)
        .pressKey('delete');
});

헤드리스 Chrome을 실행합니다.

[vagrant@localhost ~]$ testcafe "chrome:headless" test1.js

실행하면 빨간색 프레임과 같은 표시가 된다.

실행 결과이지만 잘 모르겠습니다.
그렇지만 「OK」인 것은 「passed」로부터 알 수 있다

実行結果
 Running tests in:
 - HeadlessChrome 67.0.3396 / Linux 0.0.0

 First fixture
 ✓ First test


 1 passed (10s)