Reputation: 178
I am trying to run a test of maximizing and minimizing a chat window and it is contained inside a iframe: HTML here.
the page with test is: chat_features.js
const customerURL = "https://vps-web-utils.awsbrandembassy.com/livechat-window-gherkin/"
let agent = browser;
let customer = browser.forkNewDriverInstance();
describe('First interaction customer-agent', () => {
beforeAll(function() {
agent.ignoreSynchronization = true;
customer.ignoreSynchronization = true;
customer.get(customerURL);
agent.driver.manage().window().maximize();
customer.driver.manage().window().maximize();
});
it('should maximize and minimize chat window', () => {
let elm1 = customer.$('[class="be-chat-wrap be-chat-wrap--minimize"]');
expect(elm1.isPresent()).toBe(true);
elm1.click();
customer.sleep(3000);
// switching to iframe
browser.switchTo().frame($('.be-chat-frame'));
// customer.sleep(1000);
// expect(elm1.isPresent()).toBe(false);
// let elm2 = customer.$('.control-panel__icon.control-panel__icon--minimize');
// expect(elm2.isPresent()).toBe(true);
// elm2.click();
customer.sleep(3000);
});
});
while the conf.js file is this:
exports.config = {
framework: 'jasmine',
specs: ['chat_features.js'],
multiCapabilities: [{
browserName: 'chrome'
}],
directConnect: 'true'
}
It looks like that when introducing the switching command test fails, but we have no errors logged, browser windows keep open and you have to termine using CTRL+C
Upvotes: 0
Views: 688
Reputation: 3731
Sorry, I thought your locator was fine... but it wasn't. The api states that you should use .getWebElement()
with switchTo()
... though fails to explain why.
Here's the key:
browser.switchTo().frame($('.be-chat-frame').getWebElement());
and here's your working code:
const customerURL = "https://vps-web-utils.awsbrandembassy.com/livechat-window-gherkin/";
describe('angularjs homepage', function() {
beforeAll(function() {
browser.ignoreSynchronization = true;
browser.get(customerURL);
});
it('should maximize the chat window', () => {
let elm1 = $('[class="be-chat-wrap be-chat-wrap--minimize"]');
expect(elm1.isPresent()).toBe(true);
elm1.click();
});
it('should switch to iFrame and minimize chat window', function() {
// switch to iframe
browser.switchTo().frame($('.be-chat-frame').getWebElement());
// minimizing windows
let elm2 = browser.$('.control-panel__text');
expect(elm2.isPresent()).toBe(true);
elm2.click();
// Switch back to Default Content
browser.switchTo().defaultContent();
});
});
Upvotes: 0
Reputation: 178
I managed to find the solution, here is the code:
const customerURL = "https://vps-web-utils.awsbrandembassy.com/livechat-window-gherkin/"
describe('angularjs homepage', function() {
beforeAll(function() {
browser.ignoreSynchronization = true;
browser.get(customerURL);
});
it('should maximize the chat window', () => {
let elm1 = browser.$('[class="be-chat-wrap be-chat-wrap--minimize"]');
expect(elm1.isPresent()).toBe(true);
elm1.click();
});
it('should switch to iFrame and minimize chat window', function() {
// switch to iframe
browser.switchTo().frame(browser.driver.findElement(protractor.By.css('.be-chat-frame')));
// minimizing windows
let elm2 = browser.$('.control-panel__text');
expect(elm2.isPresent()).toBe(true);
elm2.click();
// Switch back to Default Content
browser.switchTo().defaultContent();
});
});
The key is the syntax here:
browser.switchTo().frame(browser.driver.findElement(protractor.By.css('.be-chat-frame')));
Found the solution at this page: correct syntax
Upvotes: 1