Ghostjs 开源项目教程

Ghostjs 开源项目教程

ghostjs ghostjs provides modern UI testing with async functions 项目地址: https://gitcode.com/gh_mirrors/gh/ghostjs

1. 项目介绍

Ghostjs 是一个现代化的 Web 集成测试运行器，旨在通过使用 ES7 的 async 函数来简化测试框架的复杂性。传统的集成测试框架通常依赖于回调和复杂的链式语法，而 Ghostjs 通过标准化 async 函数，使得测试代码更加易于理解和维护。Ghostjs 支持在 Chrome、Firefox（通过 SlimerJS）和 PhantomJS 上运行测试。

2. 项目快速启动

安装 Ghostjs

首先，你需要通过 npm 安装 Ghostjs：

npm install ghostjs

编写第一个测试用例

以下是一个简单的测试用例，用于测试 Google 首页的内容：

import ghost from 'ghostjs';
import assert from 'assert';

describe('Google', () => {
  it('has some content', async () => {
    await ghost.open('http://google.com');
    let pageTitle = await ghost.pageTitle();
    assert.equal(pageTitle, 'Google');

    // 获取 body 的内容
    let body = await ghost.findElement('body');
    assert.ok(await body.isVisible());
    console.log('got body content', await body.html());

    // 等待第一个链接并点击它
    let firstLink = await ghost.waitForElement('a');
    firstLink.click();
  });
});

运行测试

你可以通过以下命令运行测试：

ghostjs test/mytest.js

3. 应用案例和最佳实践

等待 DOM 条件

在某些情况下，你可能需要等待特定的 DOM 条件满足后再继续执行测试。以下是一个示例，等待某个元素的位置发生变化：

await ghost.open(myUrl);
var hasMoved = await ghost.waitFor(async () => {
  var el = await ghost.findElement('someSelector');
  var rect = await el.rect();
  return rect.left > 100;
});
assert.equal(hasMoved, true);

链式调用和 Promise

Ghostjs 支持链式调用和 Promise，使得代码更加简洁：

let text = await ghost.waitForElement(selector).then(async el => el.text());
console.log(text);

4. 典型生态项目

Chrome

Ghostjs 默认使用 Chrome 作为测试运行器。你可以通过设置 CHROME_BIN 环境变量来指定 Chrome 的安装路径，并通过 CHROME_FLAGS 环境变量来设置 Chrome 的启动参数。

PhantomJS

你可以通过 --browser phantom 选项来选择使用 PhantomJS 作为测试运行器。PhantomJS 是 Ghostjs 的一个依赖项，会自动安装。

Firefox

通过 --browser firefox 选项，Ghostjs 可以使用 Firefox（通过 SlimerJS）作为测试运行器。你需要在本地安装 Firefox 才能运行测试。

Babel

由于 Ghostjs 使用了 ES7 的 async 函数，建议使用 Babel 来运行测试。你需要安装以下 Babel 预设：

npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev

并在项目根目录下创建一个 .babelrc 文件：

{
  "presets": ["es2015", "stage-0"]
}

通过以上步骤，你可以快速上手 Ghostjs，并开始编写和运行现代化的 Web 集成测试。

ghostjs ghostjs provides modern UI testing with async functions 项目地址: https://gitcode.com/gh_mirrors/gh/ghostjs