Argthtjtr

I am new to JavaScript and am working on a E2E test for a single-page web application in Angular2.
Basically, there are lots of clickable tags(not redirected to other pages but has some css effect when clicking) on the page, with some logic between them. What I am trying to do is, { randomly click a tag, check to see the the response from the page is correct or not (need to grab many components from the web to do this), then unclick it }.

So, I set two const as totalRound and ITER, which I would load the webpage totalRound times, then within each loading page, I would randomly choose and click button ITER times.

My code structure is like:

let totalRound: number = 10;

let ITER: number = 100;



describe('XX Test', () => {

    let page: AppPage;



    beforeEach(() => {

       page = new AppPage();

    });



    describe('Simulate User's Click & Unclick',() => {

        for(let round = 0; round < totalRound; round++){

            it('Click Simulation Round ' + round, () =>{

                page.navigateTo('');

                let allTagFinder = element.all(by.css('someCSS'));

                allTagFinder.getText().then(function(tags){

                let isMatched: boolean = True;

                let innerTurn = 0;



                for(let i = 0; i < ITER; i++){



                    /* Randomly select a button from allTagFinder,

                      using async func. eg. getText() to get more info

                      about the page, then check if the logic is correct or not.

                      If not correct, set isMatchTemp, a local variable to False*/



                    isMatched = isMatched && isMatchTemp;

                    innerTurn += 1;

                    if(innerTurn == ITER - 1){

                        expect(isMatched).toEqual(true);

                    }

                }                   



                });

            });

        }



    });

});

so I want to get a result after every ITER button checks from a loading page. Inside the for loop, the code is nested for async functions like getText(), etc..

In most time, the code performs correctly (looks the button checkings are in sequential). But still sometimes, it seems 2 iterations' information were conflicted. I guess there is some problem with my code structure for the async.

I thought JS is single-thread. (didn't take OS, correct me if wrong) So in the for loop, after all async. function finish initialization, all nested async. function (one for each loop) still has to run one by one, as what I wish? So in the most, the code still perform as what I hope?

I tried to add a lock in the for loop,
like:

while(i > innerTurn){

    ;

}

I wish this could force the loop to be run sequentially. So for the async. func from index 1 ~ ITER-1, it has to wait the first async. finish its work and increment the innerTurn by 1. But it just cannot even get the first async.(i=0) back...

Thanks in advanced for any suggestions.

Finally I used promise to solve the problem.

Basically, I put every small sync/async function into separate promises then use chaining to make sure the later function will only be called after the previous was resolved.

For the ITER for loop problem, I used a recursion plus promise approach:

var clickTest = function(prefix, numLeft, ITER, tagList, tagGsLen){

  if(numLeft == 0){

    return Promise.resolve();

  }



  return singleClickTest(prefix, numLeft, ITER, tagList, tagGsLen).then(function(){

    clickTest(prefix, numLeft - 1, ITER, tagList, tagGsLen);

  }).catch((hasError) => { expect(hasError).toEqual(false); });

}

So, each single clicking test will return a resolve signal when finished. Only then, the next round will be run, and the numLeft will decrease by 1. The whole test will end when numLeft gets to 0.

Also, I tried to use Python to rewrite the whole program. It seems the code can run in sequential easily. I didn't met the problems in Protractor and everything works for my first try. The application I need to test has a relatively simple logic so native Selenium seemed to be a better choice for me since it does not require to run with Frond-end code(just visit the webapp url and grab data and do process) and I am more confident with Python.