Tomek Buszewski
Tomek Buszewski

Reputation: 7935

Protractor - open browser, wait, run tests

I am learning Protractor and it seems great. But I'd like to run couple of specs on a single page opening. How can I achieve that? My problem is, a lot of stuff on my page is loaded via ajax, some by cascade.

Currently, I am running specs by using wait and beforeEach. Here's the code:

const br = browser;
const url = 'http://localhost:3000';

br.ignoreSynchronization = true;


describe('Component', () => {
    beforeEach(() => { br.get(url); });

    it ('should be present', () => {
        expect(element(by.className('news-list__wrapper')).isPresent()).toBe(true);
    });

    it ('should render children', () => {
        br.wait(() => {
            return element(by.className('news-block')).isPresent();
        }, 2500).then((r) => { if (r) { console.log('\n ✓ Component renders children') } });
    });

    it ('should render images', () => {
        br.wait(() => {
            return element.all(by.className('news-block__img')).first().isPresent();
        }, 2500).then((r) => { if (r) { console.log('\n ✓ Component renders images') } });
    });

    it ('should load images', () => {
        br.wait(() => {
            return element(by.className('news-block__image--loaded')).isPresent();
        }, 2500).then((r) => { if (r) { console.log('\n ✓ Component loads images') } });
    })
})

What can I do?

Upvotes: 1

Views: 283

Answers (2)

Sudharsan Selvaraj
Sudharsan Selvaraj

Reputation: 4832

Set browser.ignoreSynchronization = false and use browser.waitForAngular() to make your scripts wait for all ajax call to get complete. The power of protractor is that it will wait for all asynchronous calls made by the page to be completed and then only it will execute the next line of code.

Upvotes: 1

Ram Pasala
Ram Pasala

Reputation: 5231

use ExpectedConditions in browser.wait() for such ajax calls- for more details on this you can refer the API doc - http://www.protractortest.org/#/api?view=ProtractorExpectedConditions

 const br = browser;
 const url = 'http://localhost:3000';
 const EC = protractor.ExpectedConditions;

 br.ignoreSynchronization = true;


describe('Component', () => {
beforeEach(() => { br.get(url); });

it ('should be present', () => {
    expect(element(by.className('news-list__wrapper')).isPresent()).toBe(true);
});

it ('should render children', () => {
    br.wait(EC.presenceOf(element(by.className('news-block'))), 2500).then((r) => { if (r) { console.log('\n ✓ Component renders children') } });
});

it ('should render images', () => {
    br.wait(EC.presenceOf(element.all(by.className('news-block__img')).first()), 2500).then((r) => { if (r) { console.log('\n ✓ Component renders images') } });
});

it ('should load images', () => {
    br.wait(EC.presenceOf(element(by.className('news-block__image--loaded'))), 2500).then((r) => { if (r) { console.log('\n ✓ Component loads images') } });
})
})

Upvotes: 1

Related Questions