选择 facebook 按钮 webdriver java
Selecting facebook button webdriver java
我已经尝试了 select 这个 facebook 按钮的所有方法，通过 css，通过部分 link，通过 xpath。有人可以告诉我语法吗？ HTML代码如下，元素以蓝色突出显示。
这是用于 facebook Iframe 登录的html
<html>
<head>
<style type="text/css">
<title>My Photo Tab</title>
<base href="/">
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.U-RewQuh4JY.O/m=signin_annotation/exm=client,plusone/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNj6EO7Q-0o28iG5EwDca54BMQrpw/t=zcms/cb=gapi.loaded_2" async="">
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.U-RewQuh4JY.O/m=plusone/exm=client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNj6EO7Q-0o28iG5EwDca54BMQrpw/t=zcms/cb=gapi.loaded_1" async="">
<script type="text/javascript" async="" src="//assets.pinterest.com/js/pinit_main.js">
<script id="adblade-sdk" src="http://web.adblade.com/js/ads/async/show.js">
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/sdk.js">
<script id="google-platform-js" src="http://apis.google.com/js/platform.js" gapi_processed="true">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js">
<script async="" src="//www.google-analytics.com/analytics.js">
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.U-RewQuh4JY.O/m=client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNj6EO7Q-0o28iG5EwDca54BMQrpw/t=zcms/cb=gapi.loaded_0" async="">
<script>
<link rel="stylesheet" href="assets/css/bootstrap.min.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/jquery.simplecolorpicker.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/style.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/shared.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/home.index.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/home.modals.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/languageSize.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/chosen/chosen.min.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/lp2.css?gb=0.0.3">
<meta content="http://myphototab.com" property="og:url">
<meta content="Your social photos on your new tab page!" property="og:title">
<meta content="http://cdn.myphototab.com/content/images/social.jpg" property="og:image">
<meta content="My Photo Tab" property="og:site_name">
<meta content="Turn your browser's boring new tab page into your personalized photo gallery!" property="og:description">
<meta content="summary_large_image" name="twitter:card">
<meta content="MyPhotoTab" name="twitter:site">
<meta content="MyPhotoTab" name="twitter:creator">
<meta content="Your social photos on your new tab page!" name="twitter:title">
<meta content="Turn your browser's boring new tab page into your personalized photo gallery!" name="twitter:description">
<meta content="http://cdn.myphototab.com/content/images/social.jpg" name="twitter:image:src">
<link type="text/css" rel="stylesheet" href="http://staticd.cdn.adblade.com/css/zones/zone1101.css">
<style type="text/css">
<script type="text/javascript" async="" src="http://edge.quantserve.com/quant.js">
<script type="text/javascript" async="" src="http://b.scorecardresearch.com/beacon.js?c1=8&c2=6864322&c3=&c4=&c5=&c6=&c10=&c15=">
<link type="text/css" rel="stylesheet" href="http://staticd.cdn.adblade.com/css/zones/zone1101.css">
<style type="text/css">
<script type="text/javascript" async="" src="http://edge.quantserve.com/quant.js">
<script type="text/javascript" async="" src="http://b.scorecardresearch.com/beacon.js?c1=8&c2=6864322&c3=&c4=&c5=&c6=&c10=&c15=">
<style type="text/css">
<style type="text/css">
</head>
<body class="isFF isWindows loggedout page-loaded modal-open Large en" style="background-image: none; background-color: rgb(192, 192, 192); overflow-y: auto;" data-twttr-rendered="true">
<input id="IsFromExtension" type="hidden" value="true">
<div class="pageWrapper" ng-view="">
<section id="homeView">
<div class="container body-content" style="">
<div id="myModal" class="modal fade in" data-backdrop="static" data-keyboard="false" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: block; visibility: visible;">
<div onload="showModal()" ng-include="partialUrl.Base">
<div id="modalWelcome" class="modal-dialog" style="display: block;">
<div class="modal-content gray-border">
<button class="close" ng-click="welcomeClose({trackingData: ['2', 'index-welcome', 'welcome-popup-close', '']})" data-dismiss="modal" type="button">
<div class="modal-body" style="">
<div class="modal-body-inner">
<div class="language">
<div class="title center langDir" style="direction: ltr;">
<div class="subtitle2 center langDir" translate="" style="direction: ltr;">My Photo Tab allows you to see your social and other photos on your browser's new tab page - FREE!</div>
<div class="socialButtons">
<div class="socialButtonsInner">
<div class="fblogin">
<fblogin>
<div class="fbLoginInner">
<fb:login-button class=" fb_iframe_widget" onlogin="FacebookLoginState();" scope="public_profile,email,user_photos,user_friends,publish_actions" size="xlarge" login_text=" Login with Facebook " fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=860682337328409&container_width=147&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20Login%20with%20Facebook%0A%20%20%20%20&scope=public_profile%2Cemail%2Cuser_photos%2Cuser_friends%2Cpublish_actions&sdk=joey&size=xlarge">
<span style="vertical-align: bottom; width: 290px; height: 39px;">
<iframe class="" width="1000px" height="1000px" frameborder="0" name="f138e5757ce176" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" style="border: medium none; visibility: visible; width: 290px; height: 39px;" src="http://www.facebook.com/v2.1/plugins/login_button.php?app_id=860682337328409&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F6Dg4oLkBbYq.js%3Fversion%3D41%23cb%3Df135579120b2446%26domain%3Dmyphototab.com%26origin%3Dhttp%253A%252F%252Fmyphototab.com%252Ff21d55794e16b1c%26relation%3Dparent.parent&container_width=147&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20Login%20with%20Facebook%0A%20%20%20%20&scope=public_profile%2Cemail%2Cuser_photos%2Cuser_friends%2Cpublish_actions&sdk=joey&size=xlarge">
<!DOCTYPE html>
<html id="facebook" class="" lang="en">
<head>
<body class="plugin gecko win x1 Locale_en_US" dir="ltr">
<div class="_li">
<div class="pluginSkinLight pluginFontHelvetica">
<div id="u_0_0" class="pluginLoginButton pluginLoginButtonXlarge" style="width: 300px;">
<div>
<div id="u_0_1" class="_4z_b _4z_8 _4z_c" tabindex="0" role="button">
<table class="uiGrid _51mz" cellspacing="0" cellpadding="0">
<tbody>
<tr class="_51mx">
<td class="_51m-">
<td class="_51m- _51mw">
<span class="_4z_9">
<span class="_4z_f fwb">Login with Facebook</span>
尝试xpath 基于文本的搜索
//span[contains(text(),'Login with Facebook')]
但是，根据元素加载时间，您可能还需要添加一些 explicit 等待。
By xpath = By.xpath("//span[contains(text(),'Login with Facebook')]");
WebElement myDynamicElement = (new WebDriverWait(driver, 10))
.until(ExpectedConditions.presenceOfElementLocated(xpath));
myDynamicElement.click();
编辑
刚刚看到该页面包含 iframe。因此，在开始查找元素之前，您需要使用 switchTo() 将焦点设置到 iframe 中。请参阅 API doc
//Looks like the name of ifame is also dynamic
//driver.switchTo().frame("fbf1ab674");
//assuming that's the only iframe on
driver.switchTo().frame(driver.findElement(By.cssSelector('iframe')));
driver.findElement(By.xpath("//span[contains(text(),'Login with Facebook')]")).click();
//switch back to default content when done working inside iframe
driver.switchTo().defaultContent();
出于同样的原因，我怀疑您使用的 linkText 和 cssSelector 没有用。
此外，请尝试 post html 而不是图片以备将来参考，这样更容易阅读和发现可能的问题。
那不是按钮，那是一个跨度。
尝试：//span[text()='Login with Facebook']
使用 Firefox (firebug) 和 Chrome (chromebug)，您可以复制每个选定项目的 xpath。在使用 Selenium 进行开发时非常有用！
看看这个 wikihow 页面，你会喜欢的！
http://m.wikihow.com/Find-XPath-Using-Firebug
同时它也应该在 Firefox 检查器中可用。
首先切换到 iframe 使用：（正如 Saifur 所说，名称似乎是动态的，因此根据标题识别元素）
driver.switchTo().frame(driver.findElement(By.xpath("//iframe[contains(@title,'Facebook Social Plugin')]")));
然后点击跨度为
new WebDriverWait(driver, 10).until(ExpectedConditions.presenceOfElementLocated(By.xpath("//span[contains(.,'Login with Facebook')]"))).click();
我已经尝试了 select 这个 facebook 按钮的所有方法，通过 css，通过部分 link，通过 xpath。有人可以告诉我语法吗？ HTML代码如下，元素以蓝色突出显示。
这是用于 facebook Iframe 登录的html
<html>
<head>
<style type="text/css">
<title>My Photo Tab</title>
<base href="/">
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.U-RewQuh4JY.O/m=signin_annotation/exm=client,plusone/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNj6EO7Q-0o28iG5EwDca54BMQrpw/t=zcms/cb=gapi.loaded_2" async="">
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.U-RewQuh4JY.O/m=plusone/exm=client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNj6EO7Q-0o28iG5EwDca54BMQrpw/t=zcms/cb=gapi.loaded_1" async="">
<script type="text/javascript" async="" src="//assets.pinterest.com/js/pinit_main.js">
<script id="adblade-sdk" src="http://web.adblade.com/js/ads/async/show.js">
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/sdk.js">
<script id="google-platform-js" src="http://apis.google.com/js/platform.js" gapi_processed="true">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js">
<script async="" src="//www.google-analytics.com/analytics.js">
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.U-RewQuh4JY.O/m=client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNj6EO7Q-0o28iG5EwDca54BMQrpw/t=zcms/cb=gapi.loaded_0" async="">
<script>
<link rel="stylesheet" href="assets/css/bootstrap.min.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/jquery.simplecolorpicker.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/style.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/shared.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/home.index.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/home.modals.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/languageSize.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/chosen/chosen.min.css?gb=0.0.3">
<link rel="stylesheet" href="assets/css/lp2.css?gb=0.0.3">
<meta content="http://myphototab.com" property="og:url">
<meta content="Your social photos on your new tab page!" property="og:title">
<meta content="http://cdn.myphototab.com/content/images/social.jpg" property="og:image">
<meta content="My Photo Tab" property="og:site_name">
<meta content="Turn your browser's boring new tab page into your personalized photo gallery!" property="og:description">
<meta content="summary_large_image" name="twitter:card">
<meta content="MyPhotoTab" name="twitter:site">
<meta content="MyPhotoTab" name="twitter:creator">
<meta content="Your social photos on your new tab page!" name="twitter:title">
<meta content="Turn your browser's boring new tab page into your personalized photo gallery!" name="twitter:description">
<meta content="http://cdn.myphototab.com/content/images/social.jpg" name="twitter:image:src">
<link type="text/css" rel="stylesheet" href="http://staticd.cdn.adblade.com/css/zones/zone1101.css">
<style type="text/css">
<script type="text/javascript" async="" src="http://edge.quantserve.com/quant.js">
<script type="text/javascript" async="" src="http://b.scorecardresearch.com/beacon.js?c1=8&c2=6864322&c3=&c4=&c5=&c6=&c10=&c15=">
<link type="text/css" rel="stylesheet" href="http://staticd.cdn.adblade.com/css/zones/zone1101.css">
<style type="text/css">
<script type="text/javascript" async="" src="http://edge.quantserve.com/quant.js">
<script type="text/javascript" async="" src="http://b.scorecardresearch.com/beacon.js?c1=8&c2=6864322&c3=&c4=&c5=&c6=&c10=&c15=">
<style type="text/css">
<style type="text/css">
</head>
<body class="isFF isWindows loggedout page-loaded modal-open Large en" style="background-image: none; background-color: rgb(192, 192, 192); overflow-y: auto;" data-twttr-rendered="true">
<input id="IsFromExtension" type="hidden" value="true">
<div class="pageWrapper" ng-view="">
<section id="homeView">
<div class="container body-content" style="">
<div id="myModal" class="modal fade in" data-backdrop="static" data-keyboard="false" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: block; visibility: visible;">
<div onload="showModal()" ng-include="partialUrl.Base">
<div id="modalWelcome" class="modal-dialog" style="display: block;">
<div class="modal-content gray-border">
<button class="close" ng-click="welcomeClose({trackingData: ['2', 'index-welcome', 'welcome-popup-close', '']})" data-dismiss="modal" type="button">
<div class="modal-body" style="">
<div class="modal-body-inner">
<div class="language">
<div class="title center langDir" style="direction: ltr;">
<div class="subtitle2 center langDir" translate="" style="direction: ltr;">My Photo Tab allows you to see your social and other photos on your browser's new tab page - FREE!</div>
<div class="socialButtons">
<div class="socialButtonsInner">
<div class="fblogin">
<fblogin>
<div class="fbLoginInner">
<fb:login-button class=" fb_iframe_widget" onlogin="FacebookLoginState();" scope="public_profile,email,user_photos,user_friends,publish_actions" size="xlarge" login_text=" Login with Facebook " fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=860682337328409&container_width=147&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20Login%20with%20Facebook%0A%20%20%20%20&scope=public_profile%2Cemail%2Cuser_photos%2Cuser_friends%2Cpublish_actions&sdk=joey&size=xlarge">
<span style="vertical-align: bottom; width: 290px; height: 39px;">
<iframe class="" width="1000px" height="1000px" frameborder="0" name="f138e5757ce176" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" style="border: medium none; visibility: visible; width: 290px; height: 39px;" src="http://www.facebook.com/v2.1/plugins/login_button.php?app_id=860682337328409&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F6Dg4oLkBbYq.js%3Fversion%3D41%23cb%3Df135579120b2446%26domain%3Dmyphototab.com%26origin%3Dhttp%253A%252F%252Fmyphototab.com%252Ff21d55794e16b1c%26relation%3Dparent.parent&container_width=147&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20Login%20with%20Facebook%0A%20%20%20%20&scope=public_profile%2Cemail%2Cuser_photos%2Cuser_friends%2Cpublish_actions&sdk=joey&size=xlarge">
<!DOCTYPE html>
<html id="facebook" class="" lang="en">
<head>
<body class="plugin gecko win x1 Locale_en_US" dir="ltr">
<div class="_li">
<div class="pluginSkinLight pluginFontHelvetica">
<div id="u_0_0" class="pluginLoginButton pluginLoginButtonXlarge" style="width: 300px;">
<div>
<div id="u_0_1" class="_4z_b _4z_8 _4z_c" tabindex="0" role="button">
<table class="uiGrid _51mz" cellspacing="0" cellpadding="0">
<tbody>
<tr class="_51mx">
<td class="_51m-">
<td class="_51m- _51mw">
<span class="_4z_9">
<span class="_4z_f fwb">Login with Facebook</span>
尝试xpath 基于文本的搜索
//span[contains(text(),'Login with Facebook')]
但是，根据元素加载时间，您可能还需要添加一些 explicit 等待。
By xpath = By.xpath("//span[contains(text(),'Login with Facebook')]");
WebElement myDynamicElement = (new WebDriverWait(driver, 10))
.until(ExpectedConditions.presenceOfElementLocated(xpath));
myDynamicElement.click();
编辑
刚刚看到该页面包含 iframe。因此，在开始查找元素之前，您需要使用 switchTo() 将焦点设置到 iframe 中。请参阅 API doc
//Looks like the name of ifame is also dynamic
//driver.switchTo().frame("fbf1ab674");
//assuming that's the only iframe on
driver.switchTo().frame(driver.findElement(By.cssSelector('iframe')));
driver.findElement(By.xpath("//span[contains(text(),'Login with Facebook')]")).click();
//switch back to default content when done working inside iframe
driver.switchTo().defaultContent();
出于同样的原因，我怀疑您使用的 linkText 和 cssSelector 没有用。
此外，请尝试 post html 而不是图片以备将来参考，这样更容易阅读和发现可能的问题。
那不是按钮，那是一个跨度。
尝试：//span[text()='Login with Facebook']
使用 Firefox (firebug) 和 Chrome (chromebug)，您可以复制每个选定项目的 xpath。在使用 Selenium 进行开发时非常有用！
看看这个 wikihow 页面，你会喜欢的！
http://m.wikihow.com/Find-XPath-Using-Firebug
同时它也应该在 Firefox 检查器中可用。
首先切换到 iframe 使用：（正如 Saifur 所说，名称似乎是动态的，因此根据标题识别元素）
driver.switchTo().frame(driver.findElement(By.xpath("//iframe[contains(@title,'Facebook Social Plugin')]")));
然后点击跨度为
new WebDriverWait(driver, 10).until(ExpectedConditions.presenceOfElementLocated(By.xpath("//span[contains(.,'Login with Facebook')]"))).click();