How to select a menu link our Angular application with Selenium-CodePudding

I have a Spring Boot Angular Project. And I’d like to do some Selenuim tests on the components. I made the connection and entered the home page. But I can’t click on the menu that has other links to other components. It shows me the following errors:

Command: [2d56d2bfe5693b9a2876fdbaf7337e6d, findElement {using=xpath, value=a[href='/customers']}]
  Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 
  109.0.5414.75, chrome: {chromedriverVersion: 109.0.5414.74 (e7c5703604da..., userDataDir: 
  C:\Users\hp\AppData\Local\T...}, goog:chromeOptions: {debuggerAddress: localhost:64215}, 
  networkConnectionEnabled: false, pageLoadStrategy: normal, platformName: WINDOWS, proxy: 
  Proxy(), se:cdp: ws://localhost:64215/devtoo..., se:cdpVersion: 109.0.5414.75, 
  setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 1000, pageLoad: 
  300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, 
  webauthn:extension:credBlob: true, webauthn:extension:largeBlob: true, 
  webauthn:virtualAuthenticators: true}

I want to access the different Client menus or links under administration... In the source code of the page you can’t find the links I’m looking for "[/customers]". There is a tutorial that explains this.

driver.findElement(By.xpath("a[href='/customers']")).click();

My code is here

    `System.setProperty("webdriver.gecko.driver", "C:\\geckodriver.exe");

    ChromeOptions chromeOptions = new ChromeOptions();
    Map<String, Integer> timeOUts = new HashMap<>();
    timeOUts.put("implicit", 1000);
    chromeOptions.setCapability("timeouts", timeOUts);

    WebDriver driver = new ChromeDriver(chromeOptions);
    driver.manage().window().maximize();

    driver.get("http://myApplication.fr");//
    driver.findElement(By.id("email")).sendKeys("[email protected]");
    driver.findElement(By.id("password")).sendKeys("123");
    driver.findElement(By.className("fuse-mat-button-large")).click();

    driver.findElement(By.xpath("a[href='/customers']")).click();`

CodePudding user response：

This part of your code contains problem with xpath.

driver.findElement(By.xpath("a[href='/customers']")).click();

You should put "//" before tagname and "@" before attribute like:

driver.findElement(By.xpath("//a[@href='/customers']")).click();

Note that the attribute value must be written in full. If it's not the full value of the attribute you can use "contains()" like:

driver.findElement(By.xpath("//a[contains(@href, '/customers'])")).click();

CodePudding user response：

I tried to install the chrome extension 'SelectorsHub' which allows me to have the exact path of any path.

And I tried this path but no solution and I find an exception .

WARNING: Unable to find an exact match for CDP version 109, so returning the closest version found: 108
Exception in thread "main" org.openqa.selenium.NoSuchElementException: no such 
element: Unable to locate element: {"method":"xpath","selector":"//a[contains(@href, '/customers')]"}

The problem is that there is no search word 'Customers' when I try to get the source code of the page. And this page includes Angular components. the only solution is to put the link in the second tab with the customers. I tried to apply here to get an idea with the Angular components that are still displayed in the current page