如何为SpectronClient实现类型记录webdriverio？

Question

光谱是一个node.js框架，用于自动化电子应用程序。我正在使用谱以及AVA和打字本进行自动集成测试。我使用艾娃建议法来生成测试的上下文类型，但我无法弄清楚如何在作为网速客户端的谱的客户端属性上获得类型安全性。我只能看到谱类型记录定义文件提供的一些属性，这会导致类型记录输出错误。

以下是我所犯的错误：

src/pages/drive-shell.ts(7,34): error TS2339: Property 'waitForVisible' does not exist on type 'SpectronClient'.
src/pages/login.ts(7,34): error TS2339: Property 'waitForVisible' does not exist on type 'SpectronClient'.
src/pages/login.ts(11,21): error TS2339: Property 'setValue' does not exist on type 'SpectronClient'.
src/pages/login.ts(12,21): error TS2339: Property 'setValue' does not exist on type 'SpectronClient'.
src/pages/login.ts(13,21): error TS2339: Property 'click' does not exist on type 'SpectronClient'.

Answer 1

当我输入问题时，我实际上解决了这个问题，但我想，由于我做了一些搜索，找不到任何解决方案，我想我可以回答我自己的问题，以帮助其他人。

我需要给webdriver打打字机

npm i -S @types/webdriverio

然后，我将该类型导入到我的login.ts脚本中，并将其用作SpectronClient。

import * as WebdriverIO from 'webdriverio';
export class Login {
    constructor(private client: WebdriverIO.Client<void>) { }

    public async waitForPageToLoad() {
        return await this.client.waitForVisible('#username');
    }

    public login(username: string, password: string) {
        this.client.setValue('#username', username);
        this.client.setValue('#Password', password);
        this.client.click('#login');
    }
}

这是我完整的test.ts测试脚本

import * as ava from 'ava';
import { Application } from 'spectron';
import { Login } from './pages/login';
import { Settings } from './settings';

function contextualize<T>(getContext: () => Promise<T>): ava.RegisterContextual<T> {
    ava.test.beforeEach(async (t) => {
        Object.assign(t.context, await getContext());
    });
    return ava.test;
}
const test = contextualize(async () => {
    const app = new Application({
        path: '../electron.exe',
        args: ['../app/index.html'],
    });
    await app.start();
    return { app };
});

test.afterEach.always(async (t) => await t.context.app.stop());

test('can login', async (t) => {
    const login = new Login(t.context.app.client);
    await login.waitForPageToLoad();
    login.login(Settings.username, Settings.password);
});

Answer 2

到目前为止(2019年7月)，WebdriverIO已经迁移到5.0版，但是谱仍然使用WebdriverIO 4。在安装WebdriverIO类型以解决此问题时，请确保指定在WebdriverIO中使用的版本：

npm i -S @types/webdriverio@^4.8.0

Answer 3

在花了将近一天时间深入研究源代码之后，我发现光谱文档是错误的。

上面写得很清楚，

谱使用WebdriverIO，并在创建的应用程序实例上公开托管客户端属性。客户机API是WebdriverIO的浏览器对象。

但是在WebdriverIO文档中可以看到，像click、setValue等函数不是browser对象的一部分。它们可以在对象下使用。所以我就是这么做的

const inputText = await app.client.$('user_name'); // get hold of the element
inputText.click(); // get access to the WebdriverIO functions