Unable to find elements in Angular JS application using Protractor

Question

I am new to work with Angular JS application testing . I have tried with sample Angular JS apps which are available in online.

Link : Angular JS application

After explore in the net Protractor is the best way to test AngularJS. I have tried with followed code for finding elements in above link. Itried with all possible locators , but unable catch any web element .

Protractor version: 2.5.1

Code:

describe('angularjs homepage', function() {

  it( 'should load the home page', function() {
      browser.ignoreSynchronization = true
      browser.get('http://themeforest.net/item/square-responsive-admin-app-with-angularjs/full_screen_preview/7511722');
      browser.driver.manage().window().maximize()
      browser.sleep(6000);
      element(by.xpath('.//*[@id="nav"]/li[2]/a')).click();
  });
});

Config file::

exports.config = {
    //The address of a running selenium server.
  seleniumAddress: 'http://localhost:4444/wd/hub',
 //Here we specify the name of the specs files.
  specs: ['testspec.js']
}

Error:

 1) angularjs homepage should load the home page
   Message:
     NoSuchElementError: No element found using locator: By.xpath(".//*[@id=\"na
v\"]/li[2]/a")
   Stacktrace:
     NoSuchElementError: No element found using locator: By.xpath(".//*[@id=\"na
v\"]/li[2]/a")
    at new bot.Error (C:\Users\CP042756\AppData\Roaming\npm\node_modules\protrac
tor\node_modules\selenium-webdriver\lib\atoms\error.js:108:18)
    at C:\Users\CP042756\AppData\Roaming\npm\node_modules\protractor\lib\element
.js:694:15
    at Array.forEach (native)
    at goog.async.run.processWorkQueue (C:\Users\CP042756\AppData\Roaming\npm\no
de_modules\protractor\node_modules\selenium-webdriver\lib\goog\async\run.js:130:
15)
    at process._tickCallback (node.js:356:9)
Error

Please help and thanks

alecxe · Accepted Answer · 2015-11-03 14:53:54Z

The desired element is inside an iframe - switch to it's context before looking for an element:

browser.switchTo().frame("preview-frame"); 
element(by.xpath('.//*[@id="nav"]/li[2]/a')).click();

preview-frame is the name of the iframe.

As you may already know, your AngularJS application is loaded in this iframe - this is probably why you set that ignoreSynchronization flag.

I think you can test your application without turning the sync off and having the need to tweak ignoreSynchronization flag at all - the data-ng-app attribute is set on the body inside the iframe. If you go directly to the URL from where the iframe is loaded, protractor would automatically detect your AngularJS application and would work with it in sync:

it('should load the home page', function() {
  browser.get('http://iarouse.com/dist-square/v2.0.1/index.html');
  browser.driver.manage().window().maximize();

  element(by.xpath('.//*[@id="nav"]/li[2]/a')).click();
});

Chaitanya Pujari · Accepted Answer · 2015-11-04 05:38:03Z

0

hi your element is located inside the iframe before u try to click on this link you have to switch to iframe using browser.switchTo().frame("NAME OF YOUR IFRAME");

For more information on Selenium Iframe

browser.switchTo().frame("preview-frame"); 
element(by.xpath('.//*[@id="nav"]/li[2]/a')).click();

Hope this helps

edited Nov 4, 2015 at 5:38

answered Nov 4, 2015 at 3:45

Chaitanya Pujari

3674 silver badges16 bronze badges

Collectives™ on Stack Overflow

Unable to find elements in Angular JS application using Protractor

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related