NoSuchElementException gefunden in Selenium webdriver beim Versuch, CssSelector verwenden

Question

Ich versuche zu verwenden cssSelector anstelle von xpath. Ich eröffnete die CNN-Website und nahm die xpath der Politik an die Spitze. Dann versucht, es unter Verwendung cssSelector auszuwählen. Ich bin nicht in der Lage herauszufinden, was falsch ist in der cssSelector, die ich geschrieben habe. Ich bin immer NoSuchElementException

Exception in thread "main" org.openqa.selenium.NoSuchElementException: kein solches Element: Kann nicht Element lokalisieren: { "Methode": "CSS-Selektor", "Selektor": "* [ id = 'nav'] div: n-Kind (2) div: n-Kind (2) ein: n-te-Kind (3) "}

hier ist der Code

WebDriver driver = new ChromeDriver(); 
driver.manage().window().maximize(); 
driver.manage().timeouts().implicitlyWait(20,TimeUnit.SECONDS); 
driver.get("http://cnn.com"); 
//driver.findElement(By.xpath("//*[@id='nav']/div[2]/div[2]/a[3]")).click(); 
driver.findElement(By.cssSelector("*[id='nav'] div:nth-child(2) div:nth-child(2) a:nth-child(3)")).click(); 

Answer 1

Die zweite div:nth-child(2) in Ihrem Selektor sollte eigentlich div:nth-child(3) sein, die erste <a> t ag ist auch ein Kind. Sie sollten nicht verwenden * mit cssSelctor

driver.findElement(By.cssSelector("[id='nav'] div:nth-child(2) div:nth-child(3) a:nth-child(2)")).click(); 

Sie auch Klasse nav-menu-links als Startpunkt

driver.findElement(By.cssSelector("[class='nav-menu-links'] a:nth-child(2)")).click(); 

oder teilweise data-analytics-header Attribut

driver.findElement(By.cssSelector("[data-analytics-header*='main-menu_politics']")).click(); 

Answer 2

Ich bin ein großer Befürworter auch nutzen könnten von CSS-Selektoren über fast alles andere, aber in diesem Fall würde ich wahrscheinlich Link-Text anstelle eines CSS-Selektors verwenden. Danach würde ich einen XPath wie //div[@id='nav']//a[.='Politics'] verwenden. Wenn ich einen CSS-Selektor verwenden müsste, würde ich a[data-analytics-header='main-menu_politics'] verwenden.

Answer 3

Erste Dinge zuerst, wenn möglich vermeiden :nth-child und lieber Klassen, IDs oder andere (mehr oder weniger) eindeutige Attribute, um ein Element zu finden.

Zum Beispiel zeigt der XPath, den Sie mir zur Verfügung gestellt haben, mich auf cnn.com anstelle von Politics in den Bereich Geld.

Sie sollten entweder [data-analytics-header='main-menu_politics'] oder .nav-menu-links__link[href='/politics'] verwenden.

Sie können aber auch #nav statt *[id='nav'] und .CLASSNAME statt [class='CLASSNAME'] verwenden. Es gibt eine praktische Übersicht über Css-Selektoren unter w3schools.com.