CssSelectorを使用しようとしているときにSelenium webdriverにNoSuchElementExceptionが見つかりました

Question

xpathの代わりにcssSelectorを使用しようとしています。私はCNNのウェブサイトを開き、政治のxpathを一番上に置いた。次にcssSelectorを使用して選択しようとしました。私が書いたcssSelectorで何が間違っているのか分かりません。そのような要素：要素が見つかりません：{ "方法"： "CSSセレクタ"、 "選択"： "* [Iスレッド "メイン" org.openqa.selenium.NoSuchElementExceptionにNoSuchElementException

例外を取得していID = 'NAV'] DIV：n番目の子（2）DIV：n番目の子（2）A：n番目の子（3） "}

ここでは、コード

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

ありますセレクタ内の2番目のdiv:nth-child(2)は実際にはdiv:nth-child(3)、最初は<a>です。 agも子供です。また、あなたはまた、開始点として、クラスnav-menu-linksを使用することができcssSelctor

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

で*を使用していないはずです

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

または部分的data-analytics-header属性

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

Answer 2

は、私は大きな支持者ですおそらくCSSセレクタの代わりにリンクテキストを使うでしょう。その後、//div[@id='nav']//a[.='Politics']のようなXPathを使用します。 CSSセレクタを使用しなければならない場合は、a[data-analytics-header='main-menu_politics']を使用します。

Answer 3

最初にまず、:nth-childを回避し、要素を見つけるためにクラス、ID、またはその他の（多かれ少なかれ）明白な属性を使用しないでください。

たとえば、提供したXPathは、政治の代わりにcnn.comのMoneyセクションに向かって私を指しています。

[data-analytics-header='main-menu_politics']または.nav-menu-links__link[href='/politics']のいずれかを使用する必要があります。

の代わりに*[id='nav']と.CLASSNAMEの代わりに#navを使用することもできます。 w3schools.comには、CSSセレクターの便利な概要があります。