title: Switching windows and focus in WebDriver with non-angular pages
body: <p>I have two non-angular pages, one has a form which I have been able to input text and once I click the Invoke button I get another browser window (shown as a  tab in Chrome) with some text output. The new tab becomes the focus for a bit, but once I try to get a new element it focuses back on the first tab. Here's what my test look like:</p>
  
  <pre><code>beforeEach(function () {
          browser.ignoreSynchronization = true;
      });
  
      it('Do authentication of session', function () {
          session.goToCommandPage().then(function () {
              browser.findElement(by.css('#content &gt; span:nth-child(3) &gt; ul &gt; li:nth-child(5) &gt; a', 'AuthenticateUser')).click();
          }).then(function () {
              browser.findElement(by.css('#content &gt; span &gt; form &gt; table &gt; tbody &gt; tr:nth-child(3) &gt; td:nth-child(2) &gt; input')).sendKeys(COMPANY_ID);
          }).then(function () {
              browser.findElement(by.css('#content &gt; span &gt; form &gt; table &gt; tbody &gt; tr:nth-child(4) &gt; td:nth-child(2) &gt; input')).sendKeys('ADMIN');
          }).then(function () {
              browser.findElement(by.buttonText('Invoke')).click();
          }).then(function () {
              browser.sleep(7000);
          })
      });
  
      it('Switch to the results tab', function () {
          browser.getAllWindowHandles().then(function (handles) {
              browser.getTitle().then(function (title) {
                  console.log('Title: ' + title);
              });
              if (handles.length === 2) {
                  browser.switchTo().window(handles[1]).then(function () {
                      browser.sleep(7000);
                  }).then(function () {
                      browser.getTitle().then(function (title) {
                          console.log('Title now: ' + title);
                      });
                      browser.findElement(by.css('.collapsible .expanded .text')).getText().then(function (textProduced) {
                          console.log('Text printed: ' + textProduced);
                      });
                  });
              }
          });
      });
  </code></pre>
  
  <p>As you can see above I try to use handles, but where I access the handles[1] it doesn't visually change the tabs to the second one. This code just hangs where I get the handles. I see the title printed and it is that of the first form, but it just times out after that giving me a ScriptTimeoutError. I even tried to send keys to the body and that did change the tabs but the elements of the second tab couldn't be found. I am using Chrome and Protractor to run my test. I normally work with angular pages, but these two are not angular pages, but are doing things that I will later check in a angular page. </p>
  
  <p>Thank you in advance. </p>
  
  <p>EDIT: I have edited my code to go through the handles and changing based on the title of the page. It doesn't seem to change to another tab. Any suggestions on what I could be doing wrong? NOTE: This is written in JavaScript. </p>
  
  <pre><code>it('Switch to the results tab', function () {
          browser.getAllWindowHandles().then(function (handles) {
              browser.getTitle().then(function (title) {
                  console.log('Title: ' + title);
              });
              if (handles.length &gt; 1) {
                  handles.forEach(function (tab) {
                      browser.switchTo().window(tab).then(function () {
                          browser.sleep(7000);
                      }).then(function () {
                          browser.getTitle().then(function (title) {
                              console.log('Title now: ' + title);
                              if(title != 'WebService Web Service') {
                                  browser.findElement(by.css('.collapsible .expanded .text')).getText().then(function (textProduced) {
                                      console.log('Text printed: ' + textProduced);
                                  });
                              }
                          });
                      });
                  });
              }
          });
      });
  </code></pre>