javascript - 量角器问题：W/element - 为定位器找到多个元素 By(css selector, button[class*='btn-info']) - 将使用第一个结果

Question

步骤：

1. 导航到https://qaclickacademy.github.io/protocommerce/shop
2. 点击店铺
3. 选择一些手机品牌并加入购物车
4. 点击结帐按钮
5. 提取每个手机的总值并打印

问题：我正在使用以下定位器单击添加按钮 [ element.all(by.css("button[class*='btn-info']")).click() ]

但似乎所有的添加按钮都有相同的代码。默认情况下，第一个添加按钮被多次单击，并且重复添加相同的移动设备。

谁能帮我解决这个问题？

我的量角器代码：

    describe('Assignment',function(){
        function Shopping(MobileBrand){
            //Use tag name locator when only tag name is present
            element.all(by.tagName("app-card")).each(function(value){

                //when single h4 and single a tag use them directly no need to give attribute='value'
    
                value.element(by.css("h4 a")).getText().then(function(name){
                    if(name==MobileBrand)
                    {
                        console.log("Mobile Name Retrieved" +name);
                        console.log("Mobile Name Provided" +MobileBrand);
                        //Click on Add button
                        element.all(by.css("button[class*='btn-info']")).click().then(function(){
                            browser.sleep(5000);
                        });
                    }
                })
            })
        }

        it('Task',function(){
            browser.driver.manage().window().maximize();
            browser.get("https://qaclickacademy.github.io/protocommerce/");
            element(by.linkText("Shop")).click();
    
            //Pass the mobile brands to be selected
            Shopping("Samsung Note 8");
            Shopping("Nokia Edge");
            Shopping("Blackberry");
    
            element(by.partialLinkText("Checkout")).click().then(function(){
                browser.sleep(5000);
            })
        });
    })  

标签： javascriptprotractor

Answer 1

您正在声明 elementArrayFinder

element.all(by.css("button[class*='btn-info']")) // <--- .all means many elements

这意味着，您希望页面具有多个元素。因此，您需要指示量角器要使用哪一个。为此，您可以使用.get()方法

这样，如果你这样做

element.all(by.css("button[class*='btn-info']")).get(0).click();

该脚本将单击此定位器的第一个元素。同样，您可以指示单击第二个 ( .get(1))、第三个 ( .get(2)) 元素等

另一种选择是声明一个按文本返回元素的函数

let buyPhoneButton = function (name) {
  return element(by.xpath("//a[text()=" + name + "]/ancestor::app-card//button"))
}

然后使用它

buyPhoneButton("iphone X").click()

如果有帮助，请采纳答案