Fluter로 시각적 효과 조정 테스트 수행

23843 단어 CircleCI Flutter GCS vrt tech

※ 본 기사는 commmew 추가 달력 5일차 기사입니다.
Fluter가 개발한 시각 조정 테스트를 시험해 보았다.
비주얼 튜닝 테스트는 리액트 등 정면 개발에 자주 사용되는 테스트 방법인데, 플루터도 할 수 있었으면 좋겠다고 생각해서 해봤어요.
먼저 시각 조정 테스트에 대한 설명이다.

시각 조정 테스트는 무엇입니까?

구성 요소와 페이지의 캡처를 미리 준비한 정확한 이미지와 비교함으로써 픽셀 수준의 차이를 측정합니다.
참조 소스: https://tech.smartcamp.co.jp/entry/Introducing-visual-regression-testing
시각 조정 테스트의 실제 조작 이미지

이것은 실제reg-suit를 사용할 때의 표시이다.
약간 이해하기 어려워요. 오른쪽은 변경 전, 왼쪽은 변경 후의 이미지예요.
※ 화면은 여러 모드의 터미널에서 한꺼번에 표시할 때의 테스트 이미지이기 때문에 한 이미지에 4가지가 표시됩니다.
오른쪽 아래 모서리에 있는 더하기 버튼을 숨기는 대응으로 설정했기 때문에 좌우 차이는 빨간색으로 둘러싸였다.
좀 더 구체적인 VRT에 대한 상세한 설명은 아래 보도 등 상세한 사람에게 양보할 것이다.

이 기사에 Flutter에 가져오는 방법이 적혀 있습니다!그럼 해볼게요.

도전자

샘플 응용 시작

Golden_toolkit 가져오기

Golden_toolkit에서의 테스트 구현

GCS를 이용한 공개통 제작

reg-suit로 VRT

구현

테스트를 CircleaCI

로 도입

Docker Image를 만들고 이미지를 Docker hub

로 밀어냄

VRT 동작 확인

준비물

golden_toolkit(Fluter 라이브러리)

GCS(AWS 3일 수도 있음)

reg-suit

CircleaCI(이번 CI 서비스는 이것을 사용하고 다른 것도 가능)

1. 샘플 응용 프로그램 시작

다음 명령을 사용하여 Flutter VRT 테스트용 샘플 응용 프로그램 만들기

flutter create app

2. Golden_toolkit 가져오기

다음 지령 추가!

flutter pub add golden_toolkit

상기 명령을 통해pubspec.yaml에 여하행을 추가한다.

dependencies:
  golden_toolkit: ^0.12.0

3. Golden_toolkit 테스트 실시

다음 파일을 만들고 테스트 실행 전에 읽을 프로필을 추가합니다app/test/flutter_test_config.dart

import 'dart:async';
import 'package:golden_toolkit/golden_toolkit.dart';

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  // フォント読み込む
  await loadAppFonts();
  return testMain();
}

dart_test.yaml미리 서류를 만들지 않으면 아래와 같이 말하므로 미리 만들어둔다

Warning: A tag was used that wasn't specified in dart_test.yaml.
  golden was used in the test "DeviceBuilder - one scenario - override devices"

dart_test.yaml

tags:
  golden:

테스트 이미지를 저장하는 데 사용할 다음 디렉터리 만들기

mkdir app/test/goldens

app/test/golden_test.dart

import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:app/main.dart';

void main() {
  testGoldens('DeviceBuilder - one scenario - override devices',
      (tester) async {
    final builder = DeviceBuilder()
      ..overrideDevicesForAllScenarios(devices: [
        Device.phone,
        Device.iphone11,
        Device.tabletPortrait,
        Device.tabletLandscape,
      ])
      ..addScenario(
        widget: const MyApp(),
        name: 'default page',
      );

    await tester.pumpDeviceBuilder(builder);

    await screenMatchesGolden(
        tester, 'flutter_demo_page_single_scenario_more_devices');
  });
}

devices 구상된 터미널을 선택합니다.
다음 명령을 실행하여 Goldentest 실행

flutter test --update-goldens

다음 디렉터리로 이미지 출력 확인app/test/goldens flutter_demo_page_single_scenario_more_devices.png

4. GCS에서 공개용 물통 만들기

※ 본 기사는 GCS의 제작 구간 기사가 아니므로 설정 등을 간단히 설명하면 됩니다.
물통을 만들다
아래를 방문하여 "제작통"에서 적당히 제작통

제작 후'공개 방문'을 인터넷에 공개
권한 추가에서 다음 설정에 권한 추가

新しいプリンシパル：allUsers
ロール：Storage オブジェクト閲覧者

참조

5. Reg-suit으로 VRT 설치

다음 명령을 사용하여reg-suit 설치

npm init -y
npm install reg-suit

초기 설정

npx reg-suit init

기본적으로 오락이고 이외의 것은 모두 아래의 설정을 통해 진행된다.

? Plugin(s) to install (bold: recommended)
# 下記のプラグインをインストールする
- reg-keygen-git-hash-plugin : Detect the snapshot key to be compare with using Git hash.
- reg-notify-github-plugin : Notify reg-suit result to GitHub repository
- reg-publish-gcs-plugin : Fetch and publish snapshot images to Google Cloud Storage.

? Directory contains actual images.
# goldentestの画像を保存する箇所を指定ここでは test/goldens を指定

? notify-github plugin requires a client ID of reg-suit GitHub app. Open installation window in your browser Yes
# ブラウザが立ち上がるので対象のリポジトリを選択して、ClientIDを貼り付ける
? This repositoriy's client ID of reg-suit GitHub app <ClientID>

? Create a new GCS bucket No
# 4. GCSで公開用のバケット作成で作成したGCSのバケット名を入力
? Existing bucket name <GCSのバケット名>

.gitignore에 추가

node_modules
test/goldens

6. CircleaCI에서 테스트 가져오기

.circleci/config.yml 파일 생성
이번에 창고에 vrt_app 디렉터리를 만들어서 테스트를 진행해야 한다고 기술했습니다.
.circleci/config.yml

version: 2.1
jobs:
  vrt-app-visual-test:
    docker:
      - image: ohyeahseakit2/flutter_android:latest
        environment:
          GOOGLE_APPLICATION_CREDENTIALS: "/home/circleci/repo/gcloud-service-key.json"
    working_directory: ~/repo
    steps:
      - checkout
      - setup_remote_docker:
          docker_layer_caching: true
      - run:
          name: setup GCP
          command: echo $GCLOUD_SERVICE_KEY | base64 -d > /home/circleci/repo/gcloud-service-key.json
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "vrt_app/package.json" }}-{{ checksum "vrt_app/package-lock.json" }}
            - v1-dependencies-
      - run:
          name: npm install
          command: npm install
          working_directory: ~/repo/vrt_app
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "vrt_app/package.json" }}-{{ checksum "vrt_app/package-lock.json" }}
      - restore_cache:
          keys:
            - dart-dependencies-{{ checksum "vrt_app/pubspec.lock" }}
            - dart-dependencies-
      - run:
          name: Install Dependencies
          command: flutter pub get
          working_directory: ~/repo/vrt_app
      - save_cache:
          paths:
            - ~/repo/vrt_app/.dart_tool
          key: dart-dependencies-{{ checksum "vrt_app/pubspec.lock" }}
      - run:
          name: Run tests golden file update
          command: flutter test --update-goldens
          working_directory: ~/repo/vrt_app
      - run:
          command: npm run regression
          working_directory: ~/repo/vrt_app

workflows:
  vrt-app-visual-test:
    jobs:
      - vrt-app-visual-test

Circleci의 환경 변수에 GCS의 키로 설정된 JSON 파일을 베이스 64로 인코딩한 파일 추가GOOGLE_APPLICATION_CREDENTIALS상세한 방법은 아래의 보도를 참고하시오
참고 문장

7. Docker Image를 만들고 이미지를 Docker hub로 밀어냄

Fluter 최신 버전의 Docker Image를 사용할 수 있습니다.
(CodeMagic 같은 건 사용하기 편할 수도 있어요. 하지만 고집스러운 생각이라도 CircleaCI를 사용하고 싶어요...)
다음은 실제 Docker File의 내용입니다.

# BaseはCircle CIのものにする。android sdk, gcloudが既に入っているので楽
FROM cimg/android:2021.10.2-browsers

# Install firebase tools
RUN sudo curl -sL https://firebase.tools | bash

# Install tools for easylauncher
RUN sudo apt-get update && sudo apt-get install -y fontconfig ttf-dejavu

# Chrome install
RUN sudo curl -LO https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
RUN sudo apt-get install -y ./google-chrome-stable_current_amd64.deb
RUN rm google-chrome-stable_current_amd64.deb

# Install Flutter SDK
# ほぼ以下のファイルのコピペ。flutter_verisonの初期化とprecacheの部分は独自。
# https://github.com/cirruslabs/docker-images-flutter/blob/master/sdk/Dockerfile
ARG flutter_version=stable

ENV FLUTTER_HOME=${HOME}/sdks/flutter \
    FLUTTER_VERSION=$flutter_version
ENV FLUTTER_ROOT=$FLUTTER_HOME
ENV ANDROID_TOOLS_ROOT="/opt/android_sdk"

ENV PATH ${PATH}:${FLUTTER_HOME}/bin:${FLUTTER_HOME}/bin/cache/dart-sdk/bin

RUN sudo git clone --branch ${FLUTTER_VERSION} https://github.com/flutter/flutter.git ${FLUTTER_HOME}
RUN sudo chown -R $(whoami) ${FLUTTER_HOME}

RUN ${FLUTTER_HOME}/bin/flutter precache

WORKDIR ${HOME}
RUN pwd
RUN flutter doctor -v

앞으로 지허브 등을 공개하고 싶다.

8.VRT 작업 확인

main 분기에 대해 상기 절차에 따라 추가된 내용을 Push하다
이어 개발자 브랜치 등을 제작해 화면 변경, PR 제작
따라서 URL은 다음과 같이 변경된 주석과 이미지의 변경된 차이를 확인할 수 있는 URL이 나타납니다
PR 내에 제출되면 다음 리뷰는 reg-suit에서 수행됩니다.