ReferenceError: $ is not defined (WebdriverIO)

Question

我在 WebdriverIO 和 mocha 的帮助下启动本机应用程序，但无法与设备通信，但能够启动应用程序但无法与元素交互。

android_app_test.js

const webdriverio = require('webdriverio');
const androidOptions = require('../../../helpers/caps').androidOptions;
const assert = require('chai').assert;

androidOptions.capabilities.appPackage = "com.google.android.calculator"
androidOptions.capabilities.appActivity = "com.android.calculator2.Calculator"

describe('Create Chrome web session', function () {
    
    let client;

    before(async function () {
        client = await webdriverio.remote(androidOptions)
    });

    after(async function () {
        await client.deleteSession();
    });

    it('should create and destroy Android browser session', async function () {
        const elem = await $('#digit_2')
        elem.waitForDisplayed(3000);

        await client.touchClick('digit_2');
    });
});

config.js

var Mocha = require('mocha'), fs = require('fs');

var mocha = new Mocha({
    reporter: 'mochawesome-screenshots',
    reporterOptions: {
        reportDir: 'customReportDir',
        reportName: 'customReportName',
        reportTitle: 'customReportTitle',
        reportPageTitle: 'customReportPageTitle',
        takePassedScreenshot: true,
        clearOldScreenshots: true,
        shortScrFileNames: true,
        jsonReport: false,
        multiReport: false
    },
    timeout: 600000,
})

var file = ['./test/basic/app/']; //location of the test js

for (var i = 0; i < file.length; i++) {
    fs.readdirSync(file[i]).forEach(function (filename) {
        mocha.addFile(file[i] + filename);
    });
}

mocha.run(function (failures) {
    process.on('exit', function () {
        process.exit(failures);
    });
});

package.json

"scripts": {
    "test": "mocha config.js"
  },

不太确定，我认为我的配置有问题，否则

Answer 1

$ 通常用作 shorthand 到运行 JQuery 函数（比如你的 $('#digit_2')，在 "android_app_test.js" 文件中).

来自 WebdriverIO 的文档：

The $ command is a short way to call the findElement command in order to fetch a single element on the page. It returns an object that with an extended prototype to call action commands without passing in a selector. However if you still pass in a selector it will look for that element first and call the action on that element.

要解决此问题，您必须使用以下命令安装 JQuery：

在终端中运行：

npm install --save jquery
npm install --save-dev @types/jquery

然后像这样将其导入 "android_app_test.js" 文件的顶部

import * as $ from "jquery";

Answer 2

The $ global is added through the WebdriverIO test runner。由于您通过独立模式使用 wdio，因此您无法访问这些全局变量。试试这个：

const elem = await client.$('#digit_2')

Answer 3

确保您使用的是最新版本的 Webdriver.io。 Webdriver.io v5 是最新版本，也实现了 $('selector') 快捷方式。

如果您使用的是 Webdriver.io v4 - 您可能仍需要使用 browser.element('selector') 来查找您的元素。

它出现在你问题的标签中，你发布的代码可能在版本 4 上。

ReferenceError: $ is not defined (WebdriverIO)