Codeception / WebDriver / ChromeDriver でモバイルエミュレーションする

acceptance.suite.yml

# WebDriver より前に読み込ませること
actor: AcceptanceTester
modules:
    enabled:
        - \Helper\Acceptance
        - \Helper\MobileEmulation\Chrome
        - WebDriver

Chrome.php

<?php
/**
 *
 * Copyright 2018 ELASTIC Consultants Inc.
 *
 */

namespace Helper\MobileEmulation;

use Codeception\Module;
use Codeception\Module\WebDriver;
use Codeception\Test\Cest;
use Codeception\TestInterface;
use Facebook\WebDriver\Chrome\ChromeOptions;

/**
 * WebDriver拡張
 */
class Chrome extends Module
{

    /**
     * auto load when Cest class has $mobileEmulation property.
     *
     * @param TestInterface $test
     */
    public function _before(TestInterface $test)
    {
        if (!is_a($test, Cest::class)) {
            return;
        }

        $testClass = $test->getTestClass();

        $mobileEmulation = property_exists($testClass, 'mobileEmulation') ? $testClass->mobileEmulation : false;

        if ($mobileEmulation === true) {
            $this->_mobileEmulation();
        } elseif ($mobileEmulation) {
            $this->_mobileEmulation($mobileEmulation);
        }
    }

    /**
     * set mobileEmulation and restart driver
     *
     * @param string $deviceName
     * @link https://sites.google.com/a/chromium.org/chromedriver/mobile-emulation
     */
    public function emulationMobile($deviceName = 'iPhone 6')
    {
        $this->_mobileEmulation($deviceName);
        $this->getModule('WebDriver')->_restart();
    }

    /**
     * @param string $deviceName
     * @link https://sites.google.com/a/chromium.org/chromedriver/mobile-emulation
     */
    protected function _mobileEmulation($deviceName = 'iPhone 6')
    {
        $userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1';
        $deviceMetrics = [
            'width' => 360,
            'height' => 640,
            'pixelRaito' => 3.0,
        ];

        $mobileEmulation = [
            'deviceName' => $deviceName,
//            'userAgent' => $userAgent,
//            'deviceMetrics' => $deviceMetrics,
        ];

        $driver = $this->getModule('WebDriver');
        /* @var $driver WebDriver */
        $driver->_capabilities(function($currentCapabilities) use ($mobileEmulation) {
            $chromeOptions = new ChromeOptions();
            $chromeOptions->setExperimentalOption('mobileEmulation', $mobileEmulation);
            $currentCapabilities[ChromeOptions::CAPABILITY] = $chromeOptions->toArray();

            return $currentCapabilities;
        });
    }
}

SampleCest.php

<?php

class SampleCest
{

    public $mobileEmulation = false; // これをtrueまたはデバイス名指定で、このシナリオではモバイルアクセス

    // tests
    public function tryAccessToHome(AcceptanceTester $I)
    {
        $I->expect('PC版のページが表示されている');
        $I->amOnPage('/');
        $I->see('PC版');
    }

    // tests
    public function tryAccessToHomeByMobile(AcceptanceTester $I)
    {
        $I->emulationMobile();
        $I->expect('モバイル版のページが表示されている');
        $I->amOnPage('/');
        $$I->see('モバイル版');
    }
}

userAgent, deviceMetrics への対応はあとで考える（今のところ必要ない

https://gist.github.com/nojimage/452b4042cd2b2ab84a60

https://cs.chromium.org/chromium/src/chrome/test/chromedriver/chrome/mobile_device_list.cc?l=12

モジュール化 done https://github.com/nojimage/codeception-mobileemulation