无法在 protractor e2e 测试中找到 MatSnackBar 元素

Question

I am not able to locate MatSnackBar element using protractor.

This is how I display snack bar.

const snackBarRef = this.snackBar.open('Book added.', 'Undo', {
  duration: 300000
});

This is e2e test.

const snackBar = element(by.tagName('simple-snack-bar'));
browser.wait(ExpectedConditions.visibilityOf(snackBar), 30000);
element(by.tagName('simple-snack-bar')).getText().then(function (val) {
  console.log(val);
  expect(val).toEqual('Book added');
});

Test code fails with this error. Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Answer 1

Thanks for your message, @dplavcic. The reason that my code didn't work is that snackbar was out of angular root. So I have to use browser.driver.findElement() instead of element() , and finally have solved the issue.

Something like:

public getSnackBar(): promise.Promise<string> {
    const snackbar = browser.driver.wait(until.elementLocated(By.tagName('simple-snack-bar')), 10000);

    return snackbar.getText();
}```

Answer 2

The time out is from the browser.wait of 30 second, so the application cannot find the elemnt with in that time. so increase the time out as:

add below property to your config file:

jasmineNodeOpts: {defaultTimeoutInterval: 40000}

About element not found

1. make sure elemnt is not inside iframe or shadown, if so, then switch to parent before accessing it

2. use promise chaining properly or use await instead

 it('should find an element by text input model', async function() { await browser.get('app/index.html#/form'); var username =element(by.model('username')); await username.clear(); await username.sendKeys('Jane Doe'); var name = element(by.binding('username')); expect(await name.getText()).toEqual('Jane Doe'); });