Реагируйте на сквозное тестирование и автоматизацию с помощью Detox

 // e2e/firstTestSuite.spec.js // fetch the username and password from the .env file const username = process.env.username; const password = process.env.password; const sleep = duration => new Promise(resolve => setTimeout(() => resolve(), duration)); // function for pausing the execution of the test. Mainly used for waiting for a specific UI component to appear on the screen const loginWith = async (username, password) => { try { // click on login btn to navigate to the username, password screen const navigateToLoginBtn = await element(by.id("navigate-login-btn")); await navigateToLoginBtn.tap(); const usernameInput = await element(by.id("username-input")); const passwordInput = await element(by.id("password-input")); await usernameInput.tap(); await usernameInput.typeText(username); await passwordInput.typeText(password); const loginBtn = await element(by.id("login-btn")); await loginBtn.tap(); // to close the keyboard await loginBtn.tap(); // to start the authentication process const errorMessage = await element( by.text("Invalid username and/or password") ); return { errorMessage, usernameInput, passwordInput }; } catch (e) { console.log( "A sign out has not been done, which made the `navigate-login-btn` not found" ); } }; const loginWithWrongCredentials = async () => await loginWith("alex339", "9sdfhsakjf"); // log in with some random incorrect credentials const loginWithRightCredentials = async () => await loginWith(username, password); // log in with the correct credentials const goToLibrary = async () => { const libraryBtn = await element(by.id("navigation-btn-Library")); await libraryBtn.tap(); }; const goToExplore = async () => { const exploreBtn = await element(by.id("navigation-btn-Explore")); await exploreBtn.tap(); }; const signOut = async () => { await goToLibrary(); const settingsBtn = await element(by.id("settings-btn")); await settingsBtn.tap(); const signOutBtn = await element(by.id("sign-out-btn")); await signOutBtn.tap(); }; const continueAsGuest = async () => { const continueAsGuestBtn = await element(by.id("continue-as-guest")); await continueAsGuestBtn.tap(); }; const searchForMovie = async movieTitle => { const searchMoviesInput = await element(by.id("search-input-input")); await searchMoviesInput.tap(); await searchMoviesInput.clearText(); await searchMoviesInput.typeText(movieTitle); }; const goBack = async () => { const goBackBtn = await element(by.id("go-back-btn")); goBackBtn.tap(); }; const goToWatchListMovies = async () => { const watchListBtn = await element(by.id("my-watchlist")); await watchListBtn.tap(); }; const goToFavoriteMovies = async () => { const favoriteMoviesBtn = await element(by.id("my-favorite-movies")); await favoriteMoviesBtn.tap(); }; const clickFavoriteButton = async () => { const addToWatchListBtn = await element(by.id("add-to-favorite-btn")); await addToWatchListBtn.tap(); }; const clickWatchListButton = async () => { const addToWatchListBtn = await element(by.id("add-to-watch-list-btn")); await addToWatchListBtn.tap(); }; const removeTestMoviesFromLists = async () => { try { await loginWithRightCredentials(); await goToLibrary(); await goToWatchListMovies(); const movieItemInWatchList = await element( by.text("Crazy Rich Asians").withAncestor(by.id("watch-list")) ); await movieItemInWatchList.tap(); await clickWatchListButton(); await goToLibrary(); await goToFavoriteMovies(); const movieItemInFavorites = await element( by.text("Avengers: Endgame").withAncestor(by.id("favorite-list")) ); await movieItemInFavorites.tap(); await clickFavoriteButton(); } catch (e) {} await signOut(); }; // next: add function for asserting movie items 

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

 const assertMovieItems = async (moviesTitles = []) => { for (let i = 0; i < moviesTitles.length; i++) { const moviesItem = await element(by.text(moviesTitles[i])); await expect(moviesItem).toBeVisible(); } }; // next: create the test suite 

На данный момент мы готовы к созданию набора тестов. Это должно быть заключено в блок describe . Чтобы у каждого теста была «чистая» отправная точка, мы используем следующие методы жизненного цикла:

• beforeAll : выполняется до beforeAll этого набора тестов. В этом случае мы вызываем removeTestMoviesFromLists() . Как вы видели ранее, это эквивалент последовательности проверки при запуске, когда пользователь входит в систему и посещает различные страницы и нажимает на различные кнопки, которые будут использоваться в тестах. Это гарантирует, что приложение находится в минимальном функциональном состоянии, прежде чем оно начнет выполнять тесты.
• beforeEach : выполняется перед каждым тестом в этом наборе тестов. В этом случае мы хотим перезагрузить React Native. Обратите внимание, что это имеет тот же эффект, что и нажатие клавиш ⌘ + r , rr или Ctrl + r на клавиатуре.
• afterEach : выполняется после каждого теста в этом наборе тестов. В этом случае мы хотим вывести пользователя из системы, что означает, что в каждом из наших тестов мы должны снова регистрировать пользователя. Опять же, это хорошая практика, которую нужно использовать при написании тестов: каждый тест должен иметь та же отправная точка. Это гарантирует, что они могут работать в любом порядке и по-прежнему давать те же результаты:

   describe("Project Test Suite", () => { beforeAll(async () => { await removeTestMoviesFromLists(); }); beforeEach(async () => { await device.reloadReactNative(); }); afterEach(async () => { try { await signOut(); } catch (e) {} }); // next: run the individual tests }); 

Теперь давайте пройдемся по отдельным тестам. Они могут быть определены внутри блока it . Каждый it блок начинается с чистого листа и отстаивает определенный, четко определенный сценарий (который мы рассмотрели в предыдущем разделе). Каждый тест имеет предсказуемый результат, который мы должны утверждать:

 it("should disallow login with wrong credentials", async () => { const { errorMessage, usernameInput, passwordInput } = await loginWithWrongCredentials(); await expect(errorMessage).toBeVisible(); await expect(usernameInput).toBeVisible(); await expect(passwordInput).toBeVisible(); }); it("should login with right credentials", async () => { await loginWithRightCredentials(); await goToLibrary(); const watchListBtn = element(by.id("my-watchlist")); const favoriteMoviesBtn = element(by.id("my-favorite-movies")); await expect(watchListBtn).toBeVisible(); await expect(favoriteMoviesBtn).toBeVisible(); }); it("should kick user out when sign out is clicked", async () => { await loginWithRightCredentials(); await goToLibrary(); await signOut(); const loginBtn = await element(by.id("navigate-login-btn")); await expect(loginBtn).toBeVisible(); }); it("should allow guest in for Browse only", async () => { await continueAsGuest(); await goToLibrary(); const watchListBtn = element(by.id("my-watchlist")); const favoriteMoviesBtn = element(by.id("my-favorite-movies")); await expect(watchListBtn).toBeNotVisible(); await expect(favoriteMoviesBtn).toBeNotVisible(); await goToExplore(); const moviesSwipingView = element(by.id("movies-swiping-view")); await expect(moviesSwipingView).toBeNotVisible(); }); it("should fetch and render the searches properly", async () => { await loginWithRightCredentials(); const searches = [ { query: "xmen", results: ["X-Men: Apocalypse", "X-Men: Days of Future Past"] }, { query: "avengers", results: ["Avengers: Endgame", "Avengers: Age of Ultron"] }, { query: "wolverine", results: ["Logan", "The Wolverine"] } ]; for (let i = 0; i < searches.length; i++) { const currentSearch = searches[i]; await searchForMovie(currentSearch.query); await assertMovieItems(currentSearch.results); } }); it("should add to favorite", async () => { await loginWithRightCredentials(); await searchForMovie("avengers"); await element(by.text("Avengers: Endgame")).tap(); await clickFavoriteButton(); await goBack(); await goToLibrary(); await goToFavoriteMovies(); await sleep(3000); var movieItemInFavorites = await element( by.id("favorite-list").withDescendant(by.text("Avengers: Endgame")) ); await expect(movieItemInFavorites).toBeVisible(); }); it("should add to watchlist", async () => { await loginWithRightCredentials(); await searchForMovie("crazy rich"); await element(by.text("Crazy Rich Asians")).tap(); await clickWatchListButton(); await goBack(); await goToLibrary(); await goToWatchListMovies(); await sleep(3000); const movieItemInFavorites = await element( by.id("watch-list").withDescendant(by.text("Crazy Rich Asians")) ); await expect(movieItemInFavorites).toBeVisible(); }); it("should show all lists more is clicked", async () => { await loginWithRightCredentials(); const trendingDailyMoreBtn = await element(by.id("trending-daily-more")); await trendingDailyMoreBtn.tap(); await goBack(); await sleep(300); const trendingWeeklyMoreBtn = await element(by.id("trending-weekly-more")); await trendingWeeklyMoreBtn.tap(); await goBack(); await sleep(300); const popularMoreBtn = await element(by.id("popular-more")); await popularMoreBtn.tap(); await goBack(); await sleep(300); const browseSectionsView = await element(by.id("browse-sections-view")); await browseSectionsView.scrollTo("bottom"); const topRatedMoreBtn = await element(by.id("top-rated-more")); await topRatedMoreBtn.tap(); }); 

Из приведенного выше кода видно, что рабочий процесс для каждого теста можно суммировать в четыре этапа:

1. Инициализировать состояние . Здесь мы регистрируем пользователя, поэтому у каждого теста одна и та же отправная точка.
2. Выберите компонент пользовательского интерфейса . Здесь мы используем средства сопоставления для определения конкретных компонентов пользовательского интерфейса.
3. Запустить действие . Здесь мы запускаем действие с выбранным нами компонентом пользовательского интерфейса.
4. Утвердите, что ожидаемый результат существует или не существует . Именно здесь мы используем expect() чтобы проверить, вызвало ли действие другой компонент пользовательского интерфейса, чтобы показать его или скрыть с экрана. Если утверждение возвращает true , тест пройден.

Примечание: из-за постоянно меняющейся природы приложения элементы фильма, которые мы утверждаем, могут меняться очень часто. Если вы читаете это через некоторое время после публикации этой статьи, сначала убедитесь, что вы вручную проверили, видны ли определенные элементы на экране. Это поможет избежать ненужного сбоя теста и избавит вас от головной боли при запуске демонстрации.

Matchers

Вы можете сопоставить или выбрать любой элемент пользовательского интерфейса по идентификатору, тексту, метке, родителю, потомку (на любом уровне) или признакам. Вот пара примеров:

 const usernameInput = await element(by.id("username-input")); 

 const errorMessage = await element(by.text("Invalid username and/or password")); 

Действия, которые будут выполнены

Детокс может выполнять огромный набор действий над элементами пользовательского интерфейса: tap , longPress , multiTap , tapAtPoint , swipe , typeText , clearText , scroll , scrollTo и другие .

Вот несколько примеров:

 await usernameInput.tap(); await usernameInput.typeText(username); await passwordInput.clearText(); const browseSectionsView = await element(by.id("browse-sections-view")); await browseSectionsView.scrollTo("bottom"); 

Утверждения для тестирования

Детокс имеет набор утверждений, которые могут быть выполнены для соответствующих элементов пользовательского интерфейса: toBeVisible , toNotBeVisible , toExist , toNotExist , toHaveText , toHaveLabel , toHaveId , toHaveValue . Вот пара примеров:

 const assertMovieItems = async (moviesTitles = []) => { for (let i = 0; i < moviesTitles.length; i++) { const moviesItem = await element(by.text(moviesTitles[i])); await expect(moviesItem).toBeVisible(); } }; await assertMovieItems(["Avengers: Endgame", "Avengers: Age of Ultron"]); 

 const watchListBtn = element(by.id("my-watchlist")); await expect(watchListBtn).toBeNotVisible(); 

Проблемы и Рецепты

Бесконечные циклические анимации или таймеры

Одна из проблем, с которыми я столкнулся, заключается в том, что Detox останавливается, если есть цикл по таймеру или анимация, которая никогда не заканчивается. Мне пришлось сделать следующее для устранения таких проблем:

1. Поиск и отладка деталей в дереве приложений и импорт путем их изменения и устранения.
2. Снова запустите набор тестов, чтобы проверить, сохраняется ли проблема.
3. После этого и в большинстве случаев проблема заключается в анимации, которая начинается сразу после ее завершения. Поэтому я импортировал react-native-config , который является очень удобным инструментом для установки некоторых переменных среды для переключения некоторых режимов или функций в зависимости от среды. В моем случае это было добавление isTesting=true в файл .env , проверка его в кодовой базе и отключение цикла анимации или уменьшение длительности, что ускоряет набор тестов.

Как вы можете видеть, это в основном вопрос игры с настройками анимации в вашем приложении. Для получения дополнительной информации об устранении неполадок Detox, вы можете проверить следующую документацию:

• Устранение неполадок при установке
• Устранение неполадок синхронизации
• Устранение ошибок тестов
• Устранение неисправностей Flakiness

Добавление TestID к правильному элементу пользовательского интерфейса

Еще одной проблемой является testID компонента для передачи testID , поскольку Detox не поддерживает его для пользовательских компонентов. Иногда вам нужно обернуть компонент встроенным компонентом, например компонентом View , чтобы сопоставить его и взаимодействовать с ним. Это особенно верно, если код внутреннего встроенного компонента является импортированной библиотекой в ​​папке node_modules .

Составьте TestID с контекстными данными

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

Например, кнопка more всех разделов просмотра: поскольку для каждого из них отображается один и тот же компонент:

  const testID = `${(this.props.title||'').toLowerCase().replace(/\s/g, '-')}-more` return ( ... <AppButton onlyText style={styles.moreButton} textStyle={styles.moreButtonText} onPress={this.onMorePress} testID={testID} > MORE </AppButton> } 

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

Сужение селекторов

Поскольку некоторые навигаторы стремятся сохранить предыдущие экраны в дереве, Детокс найдет два элемента с одинаковым идентификатором (текст, идентификатор, метка) и выдаст исключение. Таким образом, нам нужно отфильтровать элементы с определенного экрана, чтобы получить то, что нам нужно. Вы можете сделать это, используя метод withAncestor() , который соответствует определенному идентификатору предка:

 const movieItemInWatchList = await element( by.text("Crazy Rich Asians").withAncestor(by.id("watch-list")) ); await movieItemInWatchList.tap(); 

Давайте посмотрим на результат более интересным способом

Вы можете проверить запись тестов, запущенных ниже. Вы должны получить аналогичные результаты при запуске тестов для приложения.