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

Question

我是量角器的新手。

我正在尝试 select 基于按钮标题的按钮。我想把它做成一个函数，并将按钮标题作为参数传入。

这是有效的 hard-coded 版本：

    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();
    };

当我尝试此操作时，出现以下错误：

Failed: invalid selector: An invalid or illegal selector was specified

如果这里出现基本错误，我深表歉意，我仍在学习中。我感谢任何人能给我的帮助。谢谢。

Answer 1

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

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

Answer 2

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

有关更多参考，请参阅 here。

Answer 3

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

这看起来像下面这样：

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

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

Protractor: How do I create a function that receives an HTML element as a parameter?

protractor