如何从 youtube 的搜索结果中选择歌曲？答案

【问题标题】：How to select a song from the search result in youtube?如何从 youtube 的搜索结果中选择歌曲？
【发布时间】：2018-07-19 10:18:54
【问题描述】：

我正在尝试从Youtube 的列表中单击一首歌曲。我会尽量让事情变得简单而不共享我的所有课程，但仍会向您展示我正在使用的元素。

IwebDriver  _webdriver = new ChromeDriver();
_webdriver.Navigate().GoToUrl("https://www.youtube.com/");
var element = wait.Until(x => x.FindElement(By.Id("search")));
element.SendKeys("Perfect");
var element = wait.Until(x => x.FindElement(By.CssSelector("#search-icon-legacy>yt-icon")));
element.Click();
var content = wait.Until(x => x.FindElement(By.Id("contents")));
var songHREF = content.FindElements(By.CssSelector("#video-title"));
songHREF[2].Click();

所以，发生的主要事情是 90% 的运行，songHREF 将点击实际位于主页而不是“结果”页面上的对象（歌曲链接）。剩下的 10% 只是失败了。它没有找到songHREF 元素（元素不可见）。

【问题讨论】：

标签： c# selenium selenium-webdriver css-selectors webdriverwait

【解决方案1】：

尝试等到元素可以点击：

var wait = new WebDriverWait(driver, TimeSpan.FromMinutes(1));
wait.Until(ExpectedConditions.ElementIsClickable(songHREF[2]));
songHREF[2].Click()

这将等待至少 1 分钟，直到元素可以点击，然后才会点击它。

完整的代码如下：

IwebDriver  _webdriver = new ChromeDriver();
_webdriver.Navigate().GoToUrl("https://www.youtube.com/");
var element = wait.Until(x => x.FindElement(By.Id("search")));
element.SendKeys("Perfect");
var element = wait.Until(x => x.FindElement(By.CssSelector("#search-icon- 
legacy>yt-icon")));
element.Click();
// refresh the page
Driver.Instance.Navigate().Refresh();
var content = wait.Until(x => x.FindElement(By.Id("contents")));
var songHREF = content.FindElements(By.CssSelector("#video-title"));
var wait2 = new WebDriverWait(driver, TimeSpan.FromMinutes(1));
wait2.Until(ExpectedConditions.ElementIsClickable(songHREF[2]));
songHREF[2].Click();

我发现了这个问题。有时定位器在定位不可见元素时会出错，但只需刷新页面将有助于修复它。注意：在定位元素之前刷新页面，如上面的代码 sn-p。

搜索元素时的正常结果：

有时这个结果带有相同的定位器：

在这种情况下，前 25 个元素是不可见的。但是刷新页面后，结果就像第一种情况一样（如预期的那样）。

【讨论】：

10x，但这可能是 10% 的修复。 click 最终会被执行，但是会点击错误的元素，因为由于某种原因，它会点击首页的歌曲而不是结果页的歌曲。
那么你必须改进你的定位器，可能有 10% songHREF[2] 不是你所期望的元素。
我发现了这个问题。有时定位器在定位不可见元素时会出错，但只需刷新页面将有助于修复它。请注意在定位元素之前刷新页面。我已经在代码中添加了示例

【解决方案2】：

根据您的问题，一旦您发送一个字符序列，例如完美到搜索字段并启动搜索，您可以创建一个所有歌曲的列表，然后根据您的选择，例如标题中包含Lyrics文本的歌曲您可以在其上调用Click()，您可以使用以下解决方案：

IwebDriver  _webdriver = new ChromeDriver();
_webdriver.Navigate().GoToUrl("https://www.youtube.com/");
new WebDriverWait(_webdriver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("input#search"))).SendKeys("Perfect");
_webdriver.FindElement(By.CssSelector("button.style-scope.ytd-searchbox>yt-icon")).Click();
IList<IWebElement> contents = new WebDriverWait(_webdriver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.VisibilityOfAllElementsLocatedBy(By.CssSelector("h3.title-and-badge.style-scope.ytd-video-renderer a")));
foreach (IWebElement content in contents)
    if(content.GetAttribute("innerHTML").Contains("Lyrics"))
    {
        content.Click();
        break; 
    }

【讨论】：