내용

화면 시스템 테스트의 매번 힘든
→
화면계의 테스트를 자동화할 수 있는 selenium이라는 것이 있는 것 같다.
→
그냥 화면이 있고 움직이는 것은 어렵습니다.
→
docker 내에서 헤드리스로 작동하는 selenum 환경을 만들 수있는 것 같습니다.
→
사용해 보았습니다.

docker-selenium 설치

출처는 htps : // 기주 b. 코 m / 세이 니 mHQ / 도 c 케 루 ぇ 니 m
종류는 많이 있지만,
이번에는 selenium 자체를 사용하는 것도 거의 처음인 것과, 움직이고 있는 화면도 보고 싶었던, 상정 브라우저가 chrome이므로 VNC 첨부의 selenium/standalone-chrome-debug를 선택.
standalone-chrome-debug와 standalone-chrome의 차이는 VNC 서버의 유무 같다.
그리고는 standalone-chrome에는 일본어 폰트가 들어 있지 않으므로 주의.

설치 명령

docker 설치는 할애
$ docker run -d -p <docker側のselenium serverのポート>:4444 -p <docker側のVNCのためのポート>:5900 selenium/standalone-chrome-debug:3.2.0-actinium
컨테이너 내부를 시작하면 selenium server와 VNC server가 자동으로 시작됩니다.
초기치라면 selenum server가 4444, VNC server가 5900이므로 아래와 같은 커멘드로 괜찮았습니다. 사용하는 포트를 변경하는 경우에는 적절하게 변경하십시오.
$ docker run -d -p 4444:4444 -p 5900:5900 selenium/standalone-chrome-debug:3.2.0-actinium

VNC server

5900 포트에서 VNC가 상승합니다. 기동시의 -p 지정으로 docker내의 5900포트의 통신이 호스트의 5900에 바인드 되고 있으므로 localhost:5900으로부터 docker의 VNC에 접속 할 수 있습니다.

Mac의 경우 Finder → 이동 → 서버에 연결 → 서버 주소 [vnc://localhost : 5900]로 VNC에 연결할 수 있습니다 (password는 secret)

docker에 fluxbox라는 GUI 관리자가 설치되어 GUI에서 화면을 볼 수 있습니다. 크롬도 설치되었습니다

selenium server

4444 포트에서 셀레늄 서버가 시작됩니다. 시작시의 -p 지정으로 docker내의 4444포트의 통신이 호스트의 4444에 바인드 되고 있으므로, 컨테이너가 기동하고 있는 localhost:4444를 지정하는 것으로 실행할 수 있습니다.

php-webdriver

selenium server에 액세스하는 API는 여러 언어의 구현이 있었고, 이번에는 facebook이 개발하고 있는 php-webdriver를 이용해 조작을 실시했습니다.

htps : // 기주 b. 코 m / 후세보 k / php ぇ bd ri ゔ r

샘플 코드

symfony로 자동 생성할 수 있는 간이한 crud 화면의 등록 기능의 확인

목록 화면 → 새 화면 전환 → 입력 → 등록 → 상세 화면 값의 assert

php bin/phpunit -c app 에서 실행

<?php

namespace AppBundle\Tests\Screen;

use Facebook\WebDriver\Interactions\WebDriverActions;
use Facebook\WebDriver;
use Facebook\WebDriver\WebDriverExpectedCondition;
use Facebook\WebDriver\WebDriverBy;
use Facebook\WebDriver\Remote;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;
use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;


/**
 * @property RemoteWebDriver driver
 */
class SeleniumTest extends WebTestCase
{

    const WINDOW_HEIGHT = 768;
    const WINDOW_WIDTH = 1366;
    const SELENIUM_SERVER_HOST = "http://localhost:4444/wd/hub";

    protected $driver;


    /**
     * @test
     * @group chk
     */
    public function testSelenium()
    {
        $inputTask = "test_task";
        $inputMemo = "test_memo";

        $expectTask = "test_task";
        $expectMemo = "test_memo";

        $this->driver = RemoteWebDriver::create(self::SELENIUM_SERVER_HOST, DesiredCapabilities::chrome());
        //windowサイズを指定
        $this->driver->manage()->window()->setSize(new WebDriver\WebDriverDimension(self::WINDOW_WIDTH, self::WINDOW_HEIGHT));

        $this->driver->get("http://test-selenium:8000/todo/");
        $this->driver->findElement(WebDriverBy::id('create'))->click();

        $this->driver->wait(20, 1000)->until(
            WebDriverExpectedCondition::visibilityOfElementLocated(WebDriverBy::cssSelector('body > .container'))
        );

        //フォームへの入力
        $this->driver->findElement(WebDriverBy::id('appbundle_todo_task'))->click();
        $this->driver->getKeyboard()->sendKeys($inputTask);
        $this->driver->findElement(WebDriverBy::id('appbundle_todo_memo'))->click();
        $this->driver->getKeyboard()->sendKeys($inputMemo);

        //submit
        $this->driver->findElement(WebDriverBy::id('create'))->click();
        $this->driver->wait(20, 1000)->until(
            WebDriverExpectedCondition::visibilityOfElementLocated(WebDriverBy::cssSelector('body > .container'))
        );

        //詳細画面に表示されている値の取得
        $actualTask = $this->driver->findElement(WebDriverBy::id('task_text'))->getText();
        $actualMemo = $this->driver->findElement(WebDriverBy::id('memo_text'))->getText();

        //assert
        $this->assertEquals($expectTask, $actualTask);
        $this->assertEquals($expectMemo, $actualMemo);

        $this->driver->quit();
    }

}

GIF

감상

초기 도입이나 구현은 아직 정보가 적고 힘들지만, 화면계의 E2E 테스트를 자동화할 수 있는 것은 유용하다고 생각하기 때문에 더 사용할 수 있게 되고 싶은 곳.
모처럼 헤드리스인 환경에서 작성했기 때문에 jenkins로 실행해, CI적인 느낌에도 진행해 가고 싶다・・・(누군가 노하우 가르쳐 주세요!)

샘플 코드

이번에 만든 코드는 여기에 있습니다.
htps : // 기주 b. 코 m / 유타 카오 s / 세이 니 m-st-fu r-sym fu ny