PhantomCSS 使用教程

PhantomCSS 使用教程

PhantomCSSVisual/CSS regression testing with PhantomJS项目地址:https://gitcode.com/gh_mirrors/ph/PhantomCSS

1. 项目的目录结构及介绍

PhantomCSS 项目的目录结构如下：

PhantomCSS/
├── examples/
│   ├── casperjs/
│   ├── phantomjs/
│   └── resemblejs/
├── lib/
│   ├── phantomcss/
│   └── resemble/
├── node_modules/
├── Gruntfile.js
├── package.json
├── README.md
└── tests/
    ├── phantomcss/
    └── screenshots/

目录结构介绍

• examples/: 包含不同工具的示例代码。
  • casperjs/: CasperJS 示例代码。
  • phantomjs/: PhantomJS 示例代码。
  • resemblejs/: ResembleJS 示例代码。
• lib/: 包含 PhantomCSS 和 ResembleJS 的核心库文件。
  • phantomcss/: PhantomCSS 的核心库文件。
  • resemble/: ResembleJS 的核心库文件。
• node_modules/: Node.js 模块文件夹，包含项目依赖的 npm 包。
• Gruntfile.js: Grunt 配置文件，用于运行测试任务。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。
• tests/: 包含测试文件和截图文件。
  • phantomcss/: PhantomCSS 测试文件。
  • screenshots/: 截图文件，用于存储基准截图和测试结果截图。

2. 项目的启动文件介绍

PhantomCSS 的启动文件通常位于 tests/phantomcss/ 目录下，例如 start.js。这个文件用于初始化 PhantomCSS 和 CasperJS，并定义测试流程。

示例启动文件 start.js

var phantomcss = require('../../lib/phantomcss.js');
var casper = require('casper').create();

phantomcss.init({
    libraryRoot: '../../lib/phantomcss',
    screenshotRoot: './screenshots',
    failedComparisonsRoot: './failures'
});

casper.start('http://example.com');

casper.then(function() {
    phantomcss.screenshot('#element-to-test', 'Element Test');
});

casper.then(function() {
    phantomcss.compareAll();
});

casper.run(function() {
    casper.test.done();
});

启动文件介绍

• phantomcss.init(): 初始化 PhantomCSS，设置库路径、截图存储路径和失败比较存储路径。
• casper.start(): 启动 CasperJS，打开测试页面。
• phantomcss.screenshot(): 截取指定元素的截图，并进行比较。
• phantomcss.compareAll(): 比较所有截图，生成比较结果。
• casper.run(): 运行 CasperJS 测试流程。

3. 项目的配置文件介绍

PhantomCSS 的配置文件主要是 Gruntfile.js 和 package.json。

Gruntfile.js

Gruntfile.js 是 Grunt 的配置文件，用于定义和配置测试任务。

module.exports = function(grunt) {
    grunt.initConfig({
        phantomcss: {
            desktop: {
                options: {
                    screenshots: 'baselines/desktop',
                    results: 'results/desktop',
                    viewportSize: [1280, 800]
                },
                src: [
                    'tests/phantomcss/start.js',
                    'tests/phantomcss/*-test.js'
                ]
            }
        }
    });

    grunt.loadNpmTasks('@micahgodbolt/grunt-phantomcss');
    grunt.registerTask('default', ['phantomcss']);
};

配置文件介绍

• grunt.initConfig(): 初始化 Grunt 配置，定义 phantomcss 任务。
  • options: 配置截图存储路径、结果存储路径和视口大小。
  • src: 指定测试文件路径。
• grunt.loadNpmTasks(): 加载 grunt-phantomcss 任务。
• grunt.registerTask(): 注册默认

PhantomCSSVisual/CSS regression testing with PhantomJS项目地址:https://gitcode.com/gh_mirrors/ph/PhantomCSS