javascript - 执行跳过 promise 语句

Question

我遇到一个问题，有时会执行 promise 代码，有时它会跳过处理 promise 的语句，即使用 then 语句，我尝试了两种方法仍然存在问题。

几个容易混淆的地方:

• 我不应该像使用 then 那样使用 await 和代码行处理 promise
• 我应该在 then 函数中使用 async 关键字吗

例子:

 await item.element(by.css("h4 a")).getText().then(async(text)=> {
            if (text == product) {
                await item.element(by.css("button[class*='btn-info']")).click();
            }

工作结果:

在上图中，变量打印的结果如 80000 等

我的代码如下:

第一种方法:

我已经替换了每个函数关键字并将 async 与 fat 函数放在一起，我还在允许的地方添加了 await 。另外，我有使用 await 然后一起使用

import { Given, When, Then } from "cucumber";
import { browser, element, by } from "protractor";
import { async } from "q";
import chai from "chai"

let assert = chai.assert;
async function selectItems(product) {
    //take 4 cards into list
    //go through each index in the list - and get the title= if title =desired title then in that index i will select add button
    await element.all(by.tagName("app-card")).each(async(item) => {

      await item.element(by.css("h4 a")).getText().then(async(text)=> {
            if (text == product) {
                await item.element(by.css("button[class*='btn-info']")).click();
            }
        })
    })
}
Given(':I will navigate to qaacamedy site', async () => {
   await browser.get("https://qaclickacademy.github.io/protocommerce/");
   await console.log("browser lunched");
  });

  When(': click on the shop and add all products in cart', async () => {
    await element(by.linkText("Shop")).click();
    await selectItems("Samsung Note 8");
    await selectItems("iphone X");

    await element(by.partialLinkText("Checkout")).getText().then(function(text) {
        let res = text.split("(");
        let x = res[1].trim().charAt(0);
        let y = x;
        console.log(y);
        assert.equal(res[1].trim().charAt(0),x);
    })
  });

  When(': I calculate all price', async () => {
    let value;
    let amount=new Array() ;
    let set= new Set();
    await element(by.partialLinkText("Checkout")).click();
    await element.all(by.css("td[class*='text-center']")).each(function(item){
          item.element(by.css("strong")).getText().then(function(text) {
               console.log(text);
               let res =text.split('.');
               value=Number(res[1].trim());
               amount.push(value);
               set.add(value);
               console.log("my value ="+value);
               console.log("my amounts"+amount);
        }) 
    })
        let add=0;
            // for (let i = 0; i < amount.length; i++) {
            //     await console.log("array value = "+amount[i]);
            //     add=add+amount[i];
            //  }
             for (let num of set) {

              await console.log("iterbale value of set = "+num);     //1 2 3 4 5 6
               add=add+num;
            }


             await console.log("total calculate value ="+add);
             await console.log("my amounts final"+amount);
  });

  Then(': some should be shown', async () =>  {
    await console.log("Then Statement");
  });

如上结果所示，语句现在没有打印出来，但有时我会得到结果

第二种方法:

我也尝试将 promise 函数设置为异步:

import { Given, When, Then } from "cucumber";
import { browser, element, by } from "protractor";
import { async } from "q";
import chai from "chai"

let assert = chai.assert;
async function selectItems(product) {
    //take 4 cards into list
    //go through each index in the list - and get the title= if title =desired title then in that index i will select add button
    await element.all(by.tagName("app-card")).each(async(item) => {

      await item.element(by.css("h4 a")).getText().then(async(text)=> {
            if (text == product) {
                await item.element(by.css("button[class*='btn-info']")).click();
            }
        })
    })
}
Given(':I will navigate to qaacamedy site', async () => {
   await browser.get("https://qaclickacademy.github.io/protocommerce/");
   await console.log("browser lunched");
  });

  When(': click on the shop and add all products in cart', async () => {
    await element(by.linkText("Shop")).click();
    await selectItems("Samsung Note 8");
    await selectItems("iphone X");

    await element(by.partialLinkText("Checkout")).getText().then(async(text)=> {
        let res = text.split("(");
        let x = res[1].trim().charAt(0);
        let y = x;
        await console.log(y);
        await assert.equal(res[1].trim().charAt(0),x);
    })
  });

  When(': I calculate all price', async () => {
    let value;
    let amount=new Array() ;
    let set= new Set();
    await element(by.partialLinkText("Checkout")).click();
    await element.all(by.css("td[class*='text-center']")).each(async(item)=>{
          item.element(by.css("strong")).getText().then(async(text)=> {
               await console.log(text);
               let res =text.split('.');
               value=Number(res[1].trim());
               amount.push(value);
               set.add(value);
               await console.log("my value ="+value);
               await console.log("my amounts"+amount);
        }) 
    })
        let add=0;
            // for (let i = 0; i < amount.length; i++) {
            //     await console.log("array value = "+amount[i]);
            //     add=add+amount[i];
            //  }
             for (let num of set) {

              await console.log("iterbale value of set = "+num);     //1 2 3 4 5 6
               add=add+num;
            }


             await console.log("total calculate value ="+add);
             await console.log("my amounts final"+amount);
  });

  Then(': sum should be shown', async () =>  {
    await console.log("Then Statement");
  });

在第二种方法中，我也遇到了同样的问题。

还建议，处理 promise 函数以及以下内容是否是一种好的做法:

await element(by.partialLinkText("Checkout")).getText().then(async(text)=> {

在上述两种方法中，我都使用了以下标志:

SELENIUM_PROMISE_MANAGER: false,

如果我使用 launch.json 使用 Debug模式，这个问题总是特别出现

我的特征文件如下所示:

Feature: I am going to validate the qaacamedy site

Scenario: practice assignment

    Given :I will navigate to qaacamedy site
    When : click on the shop and add all products in cart 
    When : I calculate all price 
    Then : sum should be shown

还尝试删除 async 、 async kit 和 protractor 包并重新安装它，一旦它工作但过了一段时间它又开始向我显示问题。不明白为什么相同的代码会有不同的行为，我没有得到问题的主要原因，在同一个地方停留了很多天

请调查一下，这是我在 Protractor 上遇到的最后一个严重问题

Answer 1

由于您正在使用 async/await，因此您应该避免传统的 promise 处理(例如 then)。看起来您正在 awaiting 不返回 promise 的方法，这本质上是毫无意义的。在回调上声明 async 不会使调用方法异步。

selectItems 的正确实现看起来像这样:

async function selectItems(product) {
    // async functions return a promise, use 'map' so we can wait for the promises to resolve using Promise.all
    const promises = element.all(by.tagName("app-card")).map(async (item) => {
        // use await on getText() since it returns a promise
        const text = await item.element(by.css("h4 a")).getText();
        if (text == product) {
            // return the promise produced by 'click'
            return item.element(by.css("button[class*='btn-info']")).click();
        }
    });
    return Promise.all(promises);
}

还应更新测试以避免将 async/await 语法与传统的 promise 处理混合。