Упрощение автоматизации приложений Flutter

Упрощение автоматизации приложений Flutter

Вы пытались автоматизировать приложения Flutter? Вы уже устали от многочисленных материалов в основном приложении Flutter Counter? Давайте изменим это повествование и попробуем общедоступное приложение. Во что это вам обойдется? Ничего, просто ваше внимание (потому что это достаточно читаемо) и следите за некоторыми ссылками на GitHub (и каналом на YouTube).

Моя цель — сделать это как можно проще и быстрее. Самый большой кошмар любого тестировщика — автоматизация мобильных приложений. Не потому, что это так сложно, а потому, что настройка среды автоматизации для любой платформы — не самая простая задача.

Затем возникает головная боль написания отдельных скриптов для iOS и Android. Это была головная боль, которую разделяли как разработчики, так и тестировщики. Появление кроссплатформенных технологий стало глотком свежего воздуха, но у него были свои узкие места. Благодаря appium и замечательным участникам этого инструмента с открытым исходным кодом эти узкие места постепенно исчезают. Есть два примечательных кроссплатформенных инструмента, это React Native и Flutter. Я расскажу нам, как автоматизировать последнее простыми шагами.

Важно отметить, что Flutter как инструмент поставляется со своей собственной функцией автоматического тестирования, называемой Flutter Driver, но она не так широко используется в сообществе тестировщиков из-за следующего:

• Изучение языка дартс (язык флаттера) имеет важное значение. Это огромная кривая обучения.
• Это более или менее тестирование методом белого ящика, от которого большинство тестировщиков уклоняются или почти не делают.

Тем не менее, appium ворвался, чтобы спасти ситуацию, создав инструмент, который использует appium, но по-прежнему использует виртуальную машину Dart, необходимую для тестирования флаттер-приложений. Со временем, судя по тому, что я видел, appium расширит список языков, которые можно использовать для автоматизации флаттера, что означает, что люди смогут придерживаться наиболее удобного для них языка. (Это уже вышло). На данный момент наиболее удобным является использование appium с WedDriverIO.
Можно с уверенностью предположить, что у вас установлен и запущен узел в вашей системе, если нет, найдите ссылку для получения узла здесь

Давайте начнем

Для этой демонстрации вы должны были настроить appium в своей системе и все остальные зависимости флаттера. Чтобы настроить appium, перейдите по ссылкам, чтобы настроить его на устройствах Windows или MacBook. Установите appium-doctor перед началом установки, запустите appium-doctor после завершения установки, чтобы узнать, отсутствуют ли какие-либо зависимости, необязательные зависимости не являются стопорами показа, поэтому вы можете игнорировать их в этой демонстрации. Успешная установка должна выглядеть так, как показано на рисунке ниже.

Вы получаете зеленые галочки, когда все настроено успешно.

После того, как это было настроено, загрузите VsCode, установите и запустите его. Откройте терминал внутри VsCode и давайте начнем. Запустите команду npm init -y, чтобы создать файл package.json, затем установите appium, @wdio/cli, appium-flutter-driver и appium-flutter-finder. Вы можете установить их все как dev-зависимости. npm i -D appium appium-flutter-driver appium-flutter-finder @wdio/cli.

Appium необходим в качестве сервера для запуска мобильного теста, @wdio/cli необходим для возможности использования команд webdriverIO из cli, appium flutter-driver позволит нам иметь удаленный драйвер для работы с приложением, appium-flutter- Finder поможет найти элементы и позволит водителю взаимодействовать с ними. Прелесть этой настройки в том, что Желаемые возможности, необходимые для запуска мобильных тестов, могут быть созданы внутри wdio.conf.js, но давайте сделаем паузу и пока не будем создавать wdio.conf.js. Давайте возьмем флаттер-приложение и создадим apk и приложение для iOS. В знак благодарности подписывайтесь на Mtconcept и клонируйте этот торговый репозиторий.

Загрузите Flutter и установите инструмент Путь здесь

На этой иллюстрации будет использоваться Macbook, так как можно было бы настроить приложение iOS и Android apk для предполагаемого проекта Flutter. (Только MacBook работает с конфигами iOS).

Сначала перейдите в клонированный проект и внесите изменения, чтобы разрешить Appium доступ к приложению через API-интерфейсы флаттер-драйвера. Внесите это изменение в файл pubspec.yaml, а в файл main.dart внесите это изменение. Когда это будет сделано, запустите flutter pub get, чтобы обновить эти изменения.

модификация pubscpec.yaml

изменение файла main.dart

Чтобы получить необходимый apk, откройте Android Studio и запустите эмулятор, затем запустите flutter run. На данный момент вы можете закрыть эмулятор и студию Android.

Чтобы получить приложение бегуна для iOS, запустите open ios/Runner.xcworkspace, чтобы запустить приложение X-Code, щелкните рабочую область бегуна, чтобы открыть проект бегуна и цель бегуна. Убедитесь, что вы вошли в X-Code со своим Apple ID, если это не так, войдите в систему. Нажмите «Бегун» под целью, вкладку «Подписание и возможности», выберите свой идентификатор в разделе «Команды» и убедитесь, что идентификатор пакета равен com.example.fashionShopUi.

Конфигурация Xcode

Запустите симулятор из рабочей области, затем запустите команду flutter run и закройте симулятор.
Это позволит приложению создать uri обсерватории, что важно для доступности приложения, которое будет использоваться appium.

Эти действия создадут отладочную сборку для платформ iOS и Android. APK для Android должен быть
../build/app/outputs/flutter-apk/app-debug.apk, а для iOS — ../build/ios/iphonesimulator/Runner.app. Эти местоположения будут добавлены к возможностям appium:app во время настройки файлов wdio.confs.js. Вы можете скопировать оба файла в корневой каталог вашего проекта, если хотите. Расположение этих приложений в конвейере при развертывании в любом случае будет полностью зависеть от вас, но лучше всего разместить их там, где их будет легко настроить в конвейере. В этом случае я буду использовать абсолютный путь к файлу сборки, скопированному в проект.

apk и приложение для выполнения созданы

Запустите npx wdio config, чтобы начать настройку файла wdio.conf.js. Внимательно посмотрите на терминал для получения инструкций по выбору. Выбирать;

1. На моей локальной машине в качестве серверной части автоматизации.
2. Mocha в качестве основы для использования (или любой, с кем вы знакомы)
3. Мы используем Javascript, поэтому компилятор не требуется, поэтому нажмите Enter
4. Разрешите конфигурации создать тестовое место назначения, поэтому снова нажмите Enter.
5. В этом примере мы отказываемся от получения автоматически сгенерированных тестовых файлов, поэтому нажмите Enter (я использую его, потому что я ленив. Да ладно, не осуждайте меня)
6. Вы можете выбрать предпочитаемый репортер, их много, я оставляю репортер по умолчанию.
7. Отказаться от использования плагина
8. Отмените выбор chromedriver в качестве службы, прокрутите вниз и выберите appium.
9. Оставьте базовый URL как локальный хост. Введите Y, чтобы разрешить npm install

После этого установите assert в качестве зависимости от разработчиков для проверки некоторых действий. npm i -D assert

Создайте каталог с именем test, внутри него создайте другой каталог и назовите его specs, затем создайте файл JavaScript, например .e2e.js (лучшая практика соглашения об именах)

Сделайте дубликат файла wdio.conf.js, переименуйте его как wdio.ios.conf.js и wdio.android.conf.js соответственно.

Измените содержимое следующим образом.

exports.config = {
    // ====================
    // Runner Configuration
    // ====================
    runner: 'local',
    path: '/wd/hub',
    port: 4723,
    specs: [
        './test/specs/**/*.js'
    ],
    exclude: [
        // 'path/to/excluded/files'
    ],
    // ============
    // Capabilities
    // ============
    // Define your capabilities here. WebdriverIO can run multiple capabilities at the same time.
    maxInstances: 10,
    capabilities: [{
        platformName: 'Android',
        'appium:deviceName': 'emulator-5554',
        'appium:automationName': 'Flutter',
        'appium:app': '../build/app/outputs/flutter-apk/app-debug.apk',
        maxInstances: 5
    }],
    logLevel: 'info',
    bail: 0,
    baseUrl: 'https://localhost',
    waitforTimeout: 10000,
    connectionRetryTimeout: 120000,
    connectionRetryCount: 1,
    services: ['appium'],
    framework: 'mocha',
    reporters: ['spec'],
    mochaOpts: {
        ui: 'bdd',
        timeout: 60000
    },
}

Объяснять

wdio.android.conf.js

exports.config = {
    // ====================
    // Runner Configuration
    // ====================
    runner: 'local',
    path: '/wd/hub',
    port: 4723,
    specs: [
        './test/specs/**/*.js'
    ],
    exclude: [
        // 'path/to/excluded/files'
    ],
    // ============
    // Capabilities
    // ============
    // Define your capabilities here. WebdriverIO can run multiple capabilities at the same time.
    maxInstances: 10,
    capabilities: [{
        platformName: 'iOS',
        'appium:platformVersion': '16.1',
        'appium:deviceName': 'iPhone 14',
        'appium:noReset': false,
        'appium:automationName': 'Flutter',
        'appium:app': '../build/ios/iphonesimulator/Runner.app',
        maxInstances: 5
    }],
    logLevel: 'info',
    bail: 0,
    baseUrl: 'https://localhost',
    waitforTimeout: 10000,
    connectionRetryTimeout: 120000,
    connectionRetryCount: 1,
    services: ['appium'],
    framework: 'mocha',
    reporters: ['spec'],
    mochaOpts: {
        ui: 'bdd',
        timeout: 60000
    },
}

Объяснять

wdio.ios.conf.js

Идентификация элементов в приложении Flutter.

В отличие от традиционных приложений для iOS и Android, элементы которых идентифицируются по идентификатору ресурса, идентификатору доступности, имени, Xpath , iOSPredicate и iOSClassChain, элементы флаттера идентифицируются по-разному и являются одними и теми же элементами на обеих платформах. Элементы идентифицируются в приложениях Flutter по всплывающей подсказке, тексту, типу, ValueKey и некоторым другим параметрам.
Чтобы получить эту идентификацию, вы можете запустить тестируемое приложение на эмуляторе, в клонированном проекте, где был создан apk, вы можете запустить приложение через отладку, запустив приложение в режиме отладки.

После чего вы выбираете Dart & Flutter в качестве конфига

Затем выберите эмулятор для отладки

Как только это будет сделано, вы можете начать отладку, щелкнув значок флаттера.

Это откроет макет Flutter Inspector.

Щелкните режим выбора виджета, чтобы иметь возможность выбирать и отображать элементы на экране, отображаемом в эмуляторе.

Когда элемент выбран, файл с кодом отображается вместе с макетом элемента в инспекторе, и можно выбрать средство идентификации.

В этом примере использовались два типа идентификации. В вашем файле e2e.js у вас должен быть такой код:

const find = require('appium-flutter-finder')
const assert = require('assert')
describe('First Test on Flutter', ()=>{
    it('Launch a page and Press the Button',  async ()=> {
        const button = find.byText('Get Started')
        assert.strictEqual(await driver.getElementText(find.byText('Get Started')),'Get Started')
        await driver.elementClick(button)
        await driver.execute('flutter:waitFor', find.byText('ExYu Market'))
        await driver.elementSendKeys(find.byType('TextFormField'), 'Jeans')
    })
})

Код в основном находит кнопку «Начать», проверяет текст на кнопке, нажимает ее, затем ждет, пока на следующем экране не будет введено «Джинсы» в текстовом поле.
Когда это будет сделано, пришло время проверить, что это работает.

Андроид

Запустите Android Studio и запустите эмулятор, затем запустите npx wdio run wdio.android.conf.js, эмулятор запустит приложение, и когда оно пройдет, вы увидите изображение ниже.

Успешный запуск Android

iOS

Запустите Runner в Xcode из родительского проекта с открытым ios/Runner.xcworkspace, затем запустите симулятор и запустите npx wdio run wdio.ios.conf.js, симулятор запустит приложение, и когда он пройдет, вы увидите изображение ниже.

Успешный запуск iOS

Следуйте за мной на GitHub, чтобы увидеть больше, и подпишитесь на мой канал YouTube, чтобы увидеть плейлист с более подробными шагами по созданию автоматического теста для приложений флаттера с использованием appium.