Когда вы загружаете новое мобильное приложение, вы должны создавать новые скриншоты с последними изменениями.

Генерация скриншота вручную

То, что мы делаем вручную,

  • Создайте приложение
  • Запустить в эмуляторе
  • Просматривайте экраны и делайте скриншоты — как для iOS, так и для Android.
  • Загрузите эти скриншоты в подготовленную новую версию приложения.

Автоматическое создание снимков экрана

Следуя шаг за шагом ручному процессу

  • Мы проводим автоматизированное тестирование пользовательского интерфейса с помощью Appium.
  • Затем сделайте скриншоты во время теста
  • И загрузите скриншоты в AppStore/Play Store.

Аппиум

Поскольку мы создаем кроссплатформенное мобильное приложение, нам необходимо создавать снимки экрана как для iOS, так и для Android. Поэтому нам нужен способ автоматического запуска мобильного приложения для обеих платформ.

Мы можем использовать http://appium.io/ — Автоматизация для приложений

Appium — это среда автоматизации тестирования с открытым исходным кодом для использования с нативными, гибридными и мобильными веб-приложениями.
Он управляет приложениями для iOS, Android и Windows, используя протокол WebDriver.

Он основан на Selenium WebDriver API, поэтому он хорошо знаком веб-разработчикам, и с ним очень быстро и легко начать работу.

Подробнее о том, как это работает, можно прочитать здесь: http://appium.io/docs/en/about-appium/intro/.

Краткое резюме для меня на высоком уровне:

  • Appium запускает новый сервер REST локально.
  • По умолчанию сервер работает на порту 4723. Поэтому все запросы направлены против localhost:4723
  • Отправьте запрос на новый session, и Appium локально запустит симулятор и запустит ваше приложение внутри него.
  • Общайтесь через API WebDriver и перемещайтесь по приложению, нажимайте элементы пользовательского интерфейса, вводите данные или делайте снимки экрана.

Appium и скрипт запуска приложения

Мы устанавливаем appium, затем собираем и запускаем наше мобильное приложение в Симуляторе (iOS).

  • Установите глобально пакет appium npm.
  • Запустите Appium в фоновом режиме — appium &
  • Запустите мобильное приложение в фоновом режиме — react-native run-ios — Simulator="iPhone 8 Plus" &

источник: generate_screenshots.sh

echo "install appium"
npm install -g [email protected]

echo "run appium"
appium &
appiumPid=$!

sleep 10

echo "run app"
react-native run-ios --simulator="iPhone 8 Plus" &
reactNativePid=$!
wait $reactNativePid

Запустите тест и скопируйте скриншоты

  • Запустите тест создания скриншотов с помощью Mocha
  • Скопируйте скриншоты из тестового вывода в каталог fastlane скриншоты.
  • Вы можете добавить стиля своим скриншотам с помощью фрейма — https://docs.fastlane.tools/actions/frameit/
  • И остановите сервер appium

источник: generate_screenshots.sh

echo "exec screenshots create"
appPath=$(find "`pwd`/ios" -name '*.app' -print)
export APP_PATH=$appPath
echo $appPath
echo "generating screenshots"
mocha screenshots/ios-take-screenshots.js
ls screenshots/out
cp -R screenshots/out/* ios/fastlane/screenshots/en-US
# frame the screenshots
cd ios/fastlane/screenshots
fastlane frameit white
# overwrite the originals with the framed
cd en-US
mv first_framed.png first.png
mv second_framed.png second.png

cd ../../../../
echo "shutdown appium"
kill -9 $appiumPid

Тест создания скриншота

Тест представляет собой стандартный тест mocha.js https://mochajs.org/.

  • Настройте библиотеку веб-драйверов wd — настройте сервер, желаемую конфигурацию симулятора и т. д.
  • Создайте служебную функцию снимок экрана, которая вызывает driver.takeScreenshot().saveScreenshot(…) и сохраняет снимок экрана в файловой системе.
  • Создает функцию логина, которая показывает, как найти элементы на экране — поля электронной почты и пароля, ввести текст и нажать кнопку входа.
  • Создайте тест, который входит в систему, делает снимок экрана и завершает работу.

источник: screenshots/ios-take-screenshots.js

const wd = require('wd');
const fs = require('fs');
const path = require('path');
var args = require('minimist')(process.argv.slice(2));
describe('ios - take screenshots', function() {
    this.timeout(300000);
    const appLocation = process.env.APP_PATH;
    const defaultTimeout = 10000;
    let driver;

    // setup the WebDriver configuration to communicate with the server
    before(() => {
        const serverConf = {
            host: 'localhost',
            port: 4723
        };
        driver = wd.promiseChainRemote(serverConf);
        const desired = {
            browserName: '',
            'appium-version': '1.6',
            platformName: 'iOS',
            platformVersion: '11.1',
            deviceName: 'iPhone 8 Plus',
            app: appLocation
       };
       return driver.init( desired );
    });
    after(() => {
        return driver.quit();
    });

    // A helper function to take a screenshot and save it to file system
    function screenshot(filename) {
        const dir = 'screenshots/out';
        const filePath = path.join(dir, filename);
        if(!fs.existsSync(dir)) {
             fs.mkdirSync(dir);
        }
        return driver.takeScreenshot().saveScreenshot(filePath);
    }

    // Sample login function - find the text fields for email, password - enter data and Tap on login button
    async function login() {
        const l_email = await driver.waitForElementByAccessibilityId("l_email", defaultTimeout);
        await l_email.sendKeys(userEmail);
        const l_password = await driver.waitForElementByAccessibilityId("l_password", defaultTimeout);
        await l_password.sendKeys(userPassword);
        const l_login = await driver.waitForElementByAccessibilityId("l_login", defaultTimeout);
        await l_login.click().sleep(100);
        return l_login.click().sleep(2000);
    }
    it('should create screenshots for an app', async () => {
        console.log('Take screenshot of Login');
        await screenshot('1Login.png');
        console.log('Log in the app');
        await login();
        console.log('Done!');
    });
})

В следующих частях мы увидим, как сгенерировать активы мобильного приложения (иконки, логотип, метаданные и т. д.) и как подключить все эти скрипты к инструменту сборки — fastlane.

Список серий: