Reputation: 7935
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
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
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