Last active
November 1, 2024 04:14
-
-
Save Wxh16144/d854dbda5fd2eb338810e552441322f5 to your computer and use it in GitHub Desktop.
Ant Design 视觉回归--本地对比脚本
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| # | |
| # 一键本地运行视觉回归测试 | |
| # | |
| # 前置条件： | |
| # 1. 安装 GitHub CLI // brew install gh | |
| # 使用方法： | |
| # 1. 进入 ant-design 仓库目录 | |
| # 2. 执行 npm run test:image 生成本地视觉回归快照 | |
| # 2.1 如果只需要特定组件的快照，可以使用 npm run test:image -- components/button (这样不用等太久测试用例) | |
| # 3. 执行当前脚本，根据提示操作即可，默认基准分支是 master, 可以使用 BASE_BRANCH=fature 或者 入参的方式指定 | |
| clear | |
| OWNER="ant-design" | |
| REPO="ant-design" | |
| BASE_BRANCH=${BASE_BRANCH:-$1} | |
| BASE_BRANCH=${BASE_BRANCH:-"master"} | |
| ALI_OSS_BUCKET=${ALI_OSS_BUCKET:-"antd-visual-diff"} | |
| OSS_DOMAIN="https://$ALI_OSS_BUCKET.oss-cn-shanghai.aliyuncs.com" | |
| VISUAL_STORE_PATH=${TMPDIR:-"/var/tmp"}/$REPO-visual-regression | |
| BASE_HASH="" | |
| SORT_BASE_HASH="" | |
| VISUAL_HASH="" | |
| SORT_VISUAL_HASH="" | |
| PICK_COMPONENT="" | |
| C_RED="\033[31;1m" | |
| C_GREEN="\033[32;1m" | |
| C_YELLOW="\033[33;1m" | |
| C_RESET="\033[0m" | |
| log() { | |
| echo "${C_GREEN}$1${C_RESET}" | |
| } | |
| inp() { | |
| echo "${C_YELLOW}$1${C_RESET}" | |
| } | |
| warn() { | |
| echo "${C_RED}$1${C_RESET}" | |
| } | |
| # https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda | |
| link() { | |
| # printf '\e]8;;https://ubuntu.com/\e\\Ubuntu 21.10\e]8;;\e\\\n' | |
| printf '\e]8;;%s\e\\%s\e]8;;\e\\\n' "$1" "$2" | |
| } | |
| EnsureSize() { | |
| local Filepath=$1 | |
| local Minsize=$((10 * 1024 * 1024)) # 10 MB | |
| local Filesize=$(stat -f %z $Filepath) | |
| if [ $Filesize -lt $Minsize ]; then | |
| return 1 | |
| fi | |
| return 0 | |
| } | |
| PrintInfo() { | |
| echo "🚀 本地运行视觉回归测试" | |
| echo "🔍 仓库：$C_YELLOW$OWNER/$REPO$C_RESET" | |
| echo "🌈 分支：$C_YELLOW$BASE_BRANCH$C_RESET" | |
| } | |
| CheckGitHubCLI() { | |
| gh --version >/dev/null | |
| if [ $? -ne 0 ]; then | |
| warn "❌ 请先安装 GitHub CLI" | |
| exit 1 | |
| fi | |
| } | |
| CheckInput() { | |
| if [[ $BASE_BRANCH != "master" && $BASE_BRANCH != "feature" ]]; then | |
| warn "❌ 分支名必须是 master 或者 feature" | |
| exit 1 | |
| fi | |
| } | |
| GetBranchHash() { | |
| gh api repos/$OWNER/$REPO/commits/$BASE_BRANCH --jq '.sha' | |
| } | |
| GetVisualBranchHash() { | |
| curl -s $OSS_DOMAIN/$BASE_BRANCH/visual-regression-ref.txt | head -n 1 | |
| } | |
| CompareBranchHash() { | |
| if [ "$1" != "$2" ]; then | |
| warn "❌ 分支 $BASE_BRANCH 的最新提交和视觉回归基准不一致" | |
| exit 1 | |
| fi | |
| } | |
| EnsureVisualStore() { | |
| if [ ! -d $VISUAL_STORE_PATH ]; then | |
| mkdir -p $VISUAL_STORE_PATH | |
| fi | |
| } | |
| DownloadVisualSnapshots() { | |
| EnsureVisualStore | |
| local Ref=${1:-$VISUAL_HASH} | |
| local SnapshotsName="imageSnapshots-$Ref.tar.gz" | |
| local RealPath=$VISUAL_STORE_PATH/$SnapshotsName | |
| if [ -f $RealPath ] && EnsureSize "$RealPath"; then | |
| log "📦 视觉回归快照已存在，跳过下载" | |
| return 1 | |
| else | |
| log "📦 下载视觉回归快照：$SnapshotsName" | |
| curl -s $OSS_DOMAIN/$Ref/imageSnapshots.tar.gz -o $RealPath | |
| fi | |
| if [ $? -ne 0 ] || ! EnsureSize "$RealPath"; then | |
| warn "❌ 下载视觉回归快照失败" | |
| exit 1 | |
| else | |
| log "✅ 视觉回归快照下载成功" | |
| return 1 | |
| fi | |
| } | |
| # 询问是否解压快照到当前目录 | |
| AskExtractSnapshots() { | |
| local Ref=${1:-$VISUAL_HASH} | |
| local SortRef=${Ref:0:7} | |
| local SourcePath=$VISUAL_STORE_PATH/imageSnapshots-$Ref.tar.gz | |
| local TargetPath=$VISUAL_STORE_PATH/imageSnapshots-$SortRef | |
| if [ ! -f $SourcePath ]; then | |
| return 0 | |
| fi | |
| inp "🤔 是否解压视觉回归快照？(y/n)" | |
| read -r answer | |
| if [ -z "$answer" ]; then | |
| answer="y" | |
| fi | |
| if [ "$answer" != "${answer#[Yy]}" ]; then | |
| if [ -d $TargetPath ]; then | |
| /bin/rm -rf $TargetPath | |
| fi | |
| mkdir -p $TargetPath | |
| tar -xzf $SourcePath -C $TargetPath | |
| log "✅ 解压成功" | |
| link file://$TargetPath "📂 打开快照目录" | |
| # NOTE: 这里解压后，是一个嵌套的目录，需要移动一下，方便后续使用 | |
| /bin/mv $TargetPath/imageSnapshots/* $TargetPath | |
| /bin/rm -rf $TargetPath/imageSnapshots | |
| else | |
| exit 0 | |
| fi | |
| } | |
| # 询问是否移动到快照到当前目录以符合 antd 的目录结构 | |
| AskStructureSnapshots() { | |
| log "\n\n📂 结构化快照目录..." | |
| local Ref=${1:-$VISUAL_HASH} | |
| local SortRef=${Ref:0:7} | |
| local SourcePath=$VISUAL_STORE_PATH/imageSnapshots-$SortRef | |
| local TargetPath=$(pwd)/imageSnapshots-$BASE_BRANCH | |
| if [ ! -d $SourcePath ]; then | |
| return 0 | |
| fi | |
| # 目标目录已存在，询问是否删除 | |
| if [ -d $TargetPath ]; then | |
| inp "🤔 结构化目标目录已存在，是否删除？(y/n)" | |
| read -r answer | |
| if [ -z "$answer" ]; then | |
| answer="n" | |
| fi | |
| if [ "$answer" != "${answer#[Yy]}" ]; then | |
| /bin/rm -rf $TargetPath | |
| mkdir -p $TargetPath | |
| fi | |
| else | |
| mkdir -p $TargetPath | |
| fi | |
| # 移动文件 | |
| # 询问移动哪些组件 | |
| inp "🤔 选择需要结构化的组件？(all or,button, float-button, xxx" | |
| read -r Pick_Component | |
| # 如果没有选择，直接移动所有 | |
| if [ -z "$Pick_Component" ]; then | |
| Pick_Component="all" | |
| fi | |
| Pick_Component=$(echo $Pick_Component | tr '[:upper:]' '[:lower:]') | |
| PICK_COMPONENT=$(echo $Pick_Component | tr ',' ' ') | |
| if [ "$Pick_Component" == "all" ]; then | |
| /bin/cp -r $SourcePath/* $TargetPath | |
| else | |
| for file in $SourcePath/*; do | |
| if [[ $file =~ ^$SourcePath/$Pick_Component.* ]]; then | |
| /bin/cp -r $file $TargetPath | |
| fi | |
| done | |
| fi | |
| local RelativePath=${TargetPath#$(pwd)/} | |
| echo "✅ 结构化成功，最终目录：$C_YELLOW$RelativePath$C_RESET" | |
| } | |
| RunVisualTest() { | |
| BASE_HASH=$(GetBranchHash) | |
| SORT_BASE_HASH=${BASE_HASH:0:7} | |
| VISUAL_HASH=$(GetVisualBranchHash) | |
| SORT_VISUAL_HASH=${VISUAL_HASH:0:7} | |
| log "🔍 基准分支 $BASE_BRANCH 的最新提交：$C_YELLOW$BASE_HASH$C_RESET" | |
| log "🔍 视觉回归基准：$C_YELLOW$VISUAL_HASH$C_RESET" | |
| CompareBranchHash $BASE_HASH $VISUAL_HASH | |
| DownloadVisualSnapshots "$VISUAL_HASH" | |
| AskExtractSnapshots "$VISUAL_HASH" | |
| AskStructureSnapshots "$VISUAL_HASH" | |
| echo "\n\n🚀 准备完毕 \n\n" | |
| log "🔍 运行视觉回归测试" | |
| local reportPath=$(pwd)/visualRegressionReport/report.html | |
| if [ -d $(pwd)/visualRegressionReport ]; then | |
| /bin/rm -rf $(pwd)/visualRegressionReport | |
| fi | |
| # https://github.com/ant-design/ant-design/wiki/Development#run-visual-regression-diff-locally | |
| LOCAL=true npm run test:visual-regression -- \ | |
| --base-ref=$BASE_BRANCH \ | |
| --pr-id=local | |
| echo "\n🚀 运行完毕 \n" | |
| if [ -f $reportPath ]; then | |
| # 你也可以使用 npx http-server ./visualRegressionReport 来查看报告 | |
| link "file://$reportPath" "📊 打开报告" | |
| fi | |
| } | |
| # \\\\\\\\\\ run \\\\\\\\\\ | |
| CheckGitHubCLI | |
| CheckInput | |
| PrintInfo | |
| RunVisualTest | |
| # \\\\\\\\\\\\\\\\\\\\\\\\\ |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ant Design 视觉回归
前置条件
使用方法
npm run test:image生成本地视觉回归快照下载脚本
curl -L -o- https://gist.githubusercontent.com/Wxh16144/d854dbda5fd2eb338810e552441322f5/raw/local-visual-setup.sh \ > scripts/visual-regression/local-visual-setup.sh执行脚本，根据提示操作即可
默认基准分支是 master, 可以使用 BASE_BRANCH=fature 或者 入参的方式指定
效果截图
Kapture.2024-11-01.at.12.11.17.mp4