Возможность использовать devtools в браузере Chrome с использованием CodeceptJS - PullRequest
Новая
       34

Возможность использовать devtools в браузере Chrome с использованием CodeceptJS

0 голосов
/ 07 ноября 2018

Мне нужно написать тесты для веб-приложения, а также использовать их в мобильном браузере Chrome. Есть ли возможность использовать chrome devtools и эмулятор мобильного устройства во время тестирования?

Спасибо за помощь

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Для Puppeteer используйте опцию chrome в конфигурации со значением defaultViewport.

https://codecept.io/helpers/Puppeteer/#configuration https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions

"Puppeteer": {
  "url": "https://rambler.ru",
  "browser": "chrome",
  ...
  "chrome": {
      "defaultViewport": {
          "width": 640,
          "height": 360,
          "deviceScaleFactor": 1,
          "isMobile": true,
          "hasTouch": true,
          "isLandscape": false
      }
  }
}

Или используйте page.emulate() перед каждым тестом https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulateoptions

UPD: добавить пример page.emulate

Для page.emulate с использованием: В пользовательском помощнике создайте собственную функцию, которая будет работать со страницей, например: 

async emulateDevice(options) {
  const currentPage = this.helpers['Puppeteer'].page;
  await currentPage.emulate(options);
}

Где опция - объект с окном просмотра и userAgent: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulateoptions https://codecept.io/helpers/Puppeteer/#access-from-helpers

Тогда в тесте: Создать параметры: 

const myCustomViewPort = {
  viewport: {
    width: 640,
    height: 360,
    deviceScaleFactor: 1,
    isMobile: true,
    hasTouch: true,
    isLandscape: false
  },
  userAgent: ""
}

И вы можете назвать это в своем коде: 

Before(async (I) => {
  await I.emulateDevice(myCustomViewPort);
});
0 голосов
/ 08 ноября 2018

Вы можете использовать мобильную эмуляцию Chrome, передав параметры Chrome веб-драйверу.

Например, если вы используете помощник WebDriverIO и хотите использовать Nexus 5: 

helpers: {
  WebDriverIO: {
    url: "https://rambler.ru",
    browser: "chrome",
    ...
    desiredCapabilities: {
      chromeOptions: {
        mobileEmulation: {
          deviceName: "Nexus 5"
        }
      }
    }
  }
}

Или, если вы хотите указать что-то более конкретное: 

chromeOptions: {
    mobileEmulation: {
        deviceMetrics: { width: 360, height: 640, pixelRatio: 3.0 },
        userAgent:
            "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19"
        }
    }
}

Больше информации здесь: http://chromedriver.chromium.org/mobile-emulation

...