量角器：如何创建一个接收 HTML 元素作为参数的函数？

Question

我是 Protractor 的新手。

我正在尝试根据按钮标题选择一个按钮。我想把它变成一个函数，并将按钮标题作为参数传入。

这是有效的硬编码版本：

    it('I click on a button based on the button title', async function() {
        let button = element(by.css('button[title=example_button_title]'));
        await button.click();
    });

我创建了一个全局变量和一个函数来尝试替换它，其中“buttonTitle”是我传递给函数的参数：

变量：

    let dynamicButton = buttonTitle => { return element(by.css("'button[title=" + buttonTitle + "]'")) };

功能：

    this.selectDynamicButton = async function(buttonTitle) {
        await browser.waitForAngularEnabled(false);
        await dynamicButton(buttonTitle).click();
    };

当我尝试这个时，我得到以下错误：

失败：无效选择器：指定了无效或非法的选择器

如果这里似乎存在基本错误，我深表歉意，我仍在学习。我感谢任何人可以给我的任何帮助。谢谢。

Answer 1

您可以使用量角器addLocator 功能添加自定义定位器。 （这实际上是与链接中列出的示例非常相似的用例）

如下所示：

onPrepare: function () {

    by.addLocator('buttonTitle', function (titleText, opt_parentElement) {
        // This function will be serialized as a string and will execute in the
        // browser. The first argument is the text for the button. The second
        // argument is the parent element, if any.
        const using = opt_parentElement || document;
        const matchingButtons = using.querySelectorAll(`button[title="${titleText}"]`);
        let result = undefined;

        if (matchingButtons.length === 0) {
            result = null;
        } else if (matchingButtons.length === 1) {
            result = matchingButtons[0];
        } else {
            result = matchingButtons;
        }

        return result;
    });
}

这样叫

const firstMatchingButton = element(by.buttonTitle('example_button_title'));
const allMatchingButtons = element.all(by.buttonTitle('example_button_title'));

我必须在发布之前编辑此代码，所以如果这不起作用，请告诉我。我在这里的工作主要基于this previous answer

Answer 2

Protractor 已经有一个内置的定位器，可让您使用文本获取按钮。我想你正在看类似的东西。请参阅element(by.buttonText('text of button')) 定位器。

更多参考请参见here。

Answer 3

let dynamicButton = buttonTitle => { return element(by.css('button[title=${buttonTitle} ]')) };

使用模板文字而不是使用 + 连接字符串。