README

一个 Primer 模块，使用 Primer 提供使用 BackstopJS 的简单视觉回归测试。

先决条件

BackstopJS 需要全局安装一些 NPM 模块

sudo npm install -g gulp
sudo npm install -g phantomjs
sudo npm install -g casperjs

此模块假设您使用的是基于 Unix 的系统（例如 Linux、Mac OS X）。它尚未在 Windows 上进行测试，但几乎肯定需要一些调整才能工作！

安装

将以下内容添加到您的 composer.json 对象中

"rareloop/primer-backstop": "dev-master"

我们还需要安装一些非 PHP 依赖项，因此请将以下内容添加到您的 composer.json

"scripts": {
    "post-install-cmd": [
        "cd vendor/rareloop/primer-backstop && npm install"
    ],

    "post-update-cmd": [
        "cd vendor/rareloop/primer-backstop && npm install"
    ]
}

更新您的依赖项

composer update

用法

安装后，您需要将一些命令添加到 Primer。编辑您的 bootstrap/start.php 并添加以下内容

Event::listen('cli.init', function ($cli) {
    $cli->add(new \Rareloop\Primer\Backstop\Commands\ConfigCommand);
    $cli->add(new \Rareloop\Primer\Backstop\Commands\ReferenceCommand);
    $cli->add(new \Rareloop\Primer\Backstop\Commands\TestCommand);
});

这将向 Primer CLI 添加 3 个命令。

配置

php primer backstop:config

这将创建一个名为 backstop.config.js 的文件，位于您项目的根目录。编辑此文件以更新您要测试的视口。

参考图像

php primer backstop:reference

这将为每个视口大小创建所有元素和组件的参考图像，并将它们存储在 backstop/bitmaps_reference 中。这些图像是将来测试将与之比较的基本图像。

默认情况下，将为您所有的 elements 和 components 创建参考图像。您可以通过添加到 CLI 中要测试的部分来更改此设置，例如。

# Test templates and components but not elements
php primer backstop:reference --templates --components

运行测试

php primer backstop:test

这将为每个视口大小创建所有元素和组件的参考图像，并将它们与已创建的参考图像进行比较。根据 backstop.config.js 中的设置，这将通过 CLI 提供报告或打开浏览器以提供更多视觉反馈。

稀有循环 / primer-backstop

维护者

详细信息

README

先决条件

安装

用法

配置

参考图像

运行测试