typescriptseleniumprotractore2e-testingangular-e2e

element not attached to page document, async functions running simultaneously


I cannot solve the following problem, neither could I find any info regarding it, so it's time to post it here:

I have the following piece of code

const smdb = new SmdbPage;
const edit = new SmdbEdit;

describe('SMDB Edit:', () => {
    it('should navigate to SMDB, select random',
        async () => {
            await smdb.navmenu(smdb.tooltipName.smbd);
            await smdb.getFirst();
        });
    it('Should edit edu & training', async () => {
        await edit.clearEduTrain();
        await edit.edu();
        await edit.train();
    });
});

and I have the following class:

export class SmdbEdit extends BasicEdit {

EDUCATIONSANDTRAINING = element(by.testId('educationsTrainings'));
CVCOMMISSONBOX = element(by.testId('cvCommissionBox')).element(by.className('ibox-content'));
SKILLSBOX = element(by.testId('skills'));


// cv comission
VS = this.CVCOMMISSONBOX.element(by.testId('validationStatus')).all(by.className('ng-valid')).first();
cvSave = this.CVCOMMISSONBOX.element(by.testId('SaveBtn'));
CT = this.CVCOMMISSONBOX.element(by.testId('cvCommissionCampaignID'));


// Education
dateStart = this.EDUCATIONSANDTRAINING.element(by.testId('dateStart')).element(by.css('[autocorrect="off"]'));
dateEnd = this.EDUCATIONSANDTRAINING.element(by.testId('dateEnd')).element(by.css('[autocorrect="off"]'));
institution = this.EDUCATIONSANDTRAINING.element(by.testId('institution'));
qualifications = this.EDUCATIONSANDTRAINING.element(by.testId('qualification'));
eduTypeUntouched = this.EDUCATIONSANDTRAINING.element(by.testId('type'));
eduTypeTouched = this.eduTypeUntouched.element(by.css('[autocomplete="false"]'));


// Profession
yearSelect = this.EDUCATIONSANDTRAINING.element(by.testId('yearSelect'));
organisation = this.EDUCATIONSANDTRAINING.element(by.testId('organisation'));
training = this.EDUCATIONSANDTRAINING.element(by.testId('training'));


    async clearEduTrain() {
        browser.wait(
            this.EC.urlContains('/smdb/edit/')
        ).then( async () => {
            const arr: ElementArrayFinder = element.all(by.testId('deleteRow'));
            arr.each( async (e: ElementFinder) => {
                await browser.sleep(1000);
                await e.mouseHoverClick();
            });
        });
    }

    async edu() {
        await browser.sleep(1000);
        await this.dateStart.sendKeys('2001-01-01');
        await this.dateEnd.sendKeys('2002-01-01');
        await this.qualifications.secureSendKeys('testQualification');
        await this.institution.secureSendKeys('testInstitution');
        await this.eduTypeUntouched.mouseHoverClick();
        await this.eduTypeTouched.secureSendKeys(protractor.Key.ENTER);
        await this.save(0);
    }

    async train() {
        await this.yearSelect.mouseHoverClick();
        await browser.sleep(1000);
        await this.yearSelect.sendKeys(protractor.Key.ENTER);
        await this.organisation.secureSendKeys('testOrg');
        await this.organisation.secureSendKeys('testTraining');
        await this.save(0);
    }

}

The problem that I face, is that, when the second "it" function is activated in describe() it runs all the functions inside it, so clearEduTrain();edu();train() all get called, without the asyncron order.

Also for some reason I get an error on clearEduTrain():

Should edit edu & training - StaleElementReferenceError: stale element reference: element is not attached to the page document (Session info: chrome=80.0.3987.87) (Driver info: chromedriver=80.0.3987.16 (320f6526c1632ad4f205ebce69b99a062ed78647-refs/branch-heads/3987@{#185}),platform=Mac OS X 10.14.6 x86_64)

now I am still a noob at protractor and e2e, could you please explain what is happening?


Solution

  • try to do

    async clearEduTrain() {
            await browser.wait( // <--
    // ...