getting this error "org.openqa.selenium.JavascriptException: javascript error: angular is not defined"

[suhailsqm]

I have used the below code at which i am getting the error. I am running using java, selenium and testng framework.

WebElement stateSelect = driver.findElement(ByAngular.withRootSelector(""app-create-customers"").model("state"))

Please find the error in the below logs.
Issue Logs.txt;

I have chosen the right root selector and also the model.

My Html doc in angular app looks like so.

        <div class="col-md-6">
          <div class="form-group">
            <label for="userinput4">State<span style="color:red">*</span></label>
            <ng-select [(ngModel)]="state" (change)="onSelectState()">
              <ng-option value="KARNATAKA">KARNATAKA</ng-option>
              <ng-option value="TAMIL NADU">TAMIL NADU</ng-option>
              <ng-option value="ANDHRA PRADESH">ANDHRA PRADESH</ng-option>
            </ng-select>
          </div>
        </div>

On inspecting the web element the html code looks something like this, which seems that i have chosen the right root selector.

...

I have very little knowledge in angular and started automating a website for the first time in selenium.

[suhailsqm]

I have already raised this issue here but no response.
https://stackoverflow.com/questions/72938900/getting-this-error-org-openqa-selenium-javascriptexception-javascript-error-a

Please go through this document for complete information.

[suhailsqm]

i am getting the same error, after trying in firefox, chrome v102 & chrome v104.

[paul-hammant]

Make a Github repo with one Java class and a pom.xml that gives me a reproduction and I'll take a look

[suhailsqm]

Hi Paul,
Please find the github repo
https://github.com/suhailsqm/FirstTestNG.git
Thank you.

[suhailsqm]

Hi Paul, If you need any further information please let me know. It would be helpful if you could help me with this issue, or suggest any work around. Thanks.

[paul-hammant]

Root selector is wrong, I think. This one is wrongwithRootSelector("\"app-create-customers\""), should be as screenshot

[suhailsqm]

I wrote a simple angular app shown in the link https://angular-tour-of-heroes-1a2a8.web.app/
When i am trying to access the model "hero.name" with .withRootSelector(""app-root"") or .withRootSelector(""app-heroes"") i am yet facing the error "angular is not defined".
Can you please suggest me how to proceed. I tried to use a very simple app located at the path https://github.com/suhailsqm/angular-tour-of-heroes.git but yet facing the same error.

[paul-hammant]

You'll have to make me the JAVA test repo that uses nGWebDriver too. A reproducible thing. Something that uses https://angular-tour-of-heroes-1a2a8.web.app/ and has the least lines of code necessary for me to see what the problem is.

[suhailsqm]

Hi Paul,
https://github.com/suhailsqm/FirstTestNG.git
Please find the latest code in the above repository.

[paul-hammant]

mvn install doesn't identify any tests.

[suhailsqm]

I added the tests in mvn install. Can you please check it now.

[paul-hammant]

This works for me --->

package com.vilcart.app;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.time.Duration;
import java.util.List;
import java.util.NoSuchElementException;
import java.util.concurrent.TimeUnit;

import static java.lang.invoke.MethodHandles.lookup;
import static org.slf4j.LoggerFactory.getLogger;
import static org.assertj.core.api.Assertions.assertThat;

import org.apache.poi.xssf.usermodel.XSSFCell;
import org.apache.poi.xssf.usermodel.XSSFSheet;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.DataFormatter;
//import org.apache.poi.ss.usermodel.Cell.*;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptException;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.FluentWait;
import org.openqa.selenium.support.ui.Wait;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.slf4j.Logger;

import org.testng.annotations.Test;
import org.testng.annotations.BeforeTest;
import org.testng.Reporter;
import org.testng.annotations.AfterTest;

import io.github.bonigarcia.wdm.WebDriverManager;
import com.vilcart.pom.*;
import org.openqa.selenium.interactions.Actions;
import com.paulhammant.ngwebdriver.NgWebDriver;
import com.paulhammant.ngwebdriver.ByAngular;
import com.paulhammant.ngwebdriver.ByAngularModel;

import org.openqa.selenium.support.ui.WebDriverWait;

public class ReadLogin {

	static final Logger log = getLogger(lookup().lookupClass());

    WebDriver driver;
    NgWebDriver ngWebDriver;
    //WebDriverWait wait;
    //XSSFWorkbook workbook;
    //XSSFSheet sheet;
    //XSSFCell cell;

    
    @BeforeTest
    public void TestSetup()
	{

    	WebDriverManager.firefoxdriver().setup();
    	driver = new FirefoxDriver();
    	ngWebDriver = new NgWebDriver((JavascriptExecutor) driver).withRootSelector("\"app-root\"");
    	driver.get("https://angular-tour-of-heroes-1a2a8.web.app/");
        ngWebDriver.waitForAngularRequestsToFinish();
    	driver.manage().window().maximize();
    	Reporter.log(driver.getTitle(), true);
     }
    @AfterTest
    public void TestTeardown() throws InterruptedException 
    {
    	Thread.sleep(3000);
    	driver.quit();
    }
    @Test
    public void ReadData() throws FileNotFoundException, IOException, NoSuchElementException, InterruptedException, JavascriptException {
    	
        WebElement stateSelect = driver.findElement(By.id("name"));
        stateSelect.sendKeys("Testing Angular");
    	
    }
}

I didn't understand the findElement(..) the way you were trying to do it. I've fixed it - see above.

[suhailsqm]

I am trying to access a web element in angular app using model, i can acheive the same using id but i was very well looking forward to using binding or model in angular app. Even after acheiving to send keys using id, i am unable to synchronize my automation suite(testing angular) as i see ngWebDriver.waitForAngularRequestsToFinish(); is not doing what it promises to do.

even the below code which i found online is not doing the needed, i.e waiting for the particular angular element to be rendered/loaded before subsequent test steps are executed.

JavascriptExecutor js=((JavascriptExecutor) driver);
js.executeScript("var injector = window.angular.element(argument[0]).injector(); var $http = injector.get('$http'); return ($http.pendingRequests.length === 0);",district);

I need to automate testing of my company's website soon. Nevetheless thank you for your help.

[paul-hammant]

Possibly a shadow-dom thing that I'm unfamiliar with - sorry