Capybara RackTest cannot click or find button but Selenium can - capybara

I'm having trouble with a Cucumber test using Capybara (2.0.0).
Here's the (valid) html generated by page.html when running in RackTest:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>EmbeddedUiWeb</title>
</head>
<body class="embedded_ui">
<form action="/patient_context/test_host" id="patientidentity" method="POST">
<input id="root" name="root" type="text" value="root"/>
<input id="extension" name="extension" type="text" value="extension"/>
<input class="btn" type="Submit" value="Show Stuff"/>
</form>
</body></html>
The Capybara method click_on("Show Stuff") returns the error:
Unable to find link or button "Show Stuff" (Capybara::ElementNotFound)
org/jruby/RubyBasicObject.java:1704:in `__send__'
org/jruby/RubyKernel.java:2101:in `send'
org/jruby/RubyBasicObject.java:1704:in `__send__'
org/jruby/RubyKernel.java:2101:in `send'
It works fine when using the Selenium driver, which interestingly has a different source generated by page.html
<HTML><HEAD><META content="IE=8.0000" http-equiv="X-UA-Compatible">
<TITLE>EmbeddedUiWeb</TITLE></HEAD>
<BODY class=embedded_ui>
<FORM id=patientidentity method=post action=/patient_context/test_host>
<INPUT id=root value=root type=text name=root></INPUT>
<INPUT id=extension value=extension type=text name=extension></INPUT>
<INPUT class=btn value="Show Stuff" type=submit></INPUT>
</FORM>
</BODY></HTML>
Thanks for your help! I need it!

attributes must be all lowercase. Setting the button type=submit solved the problem

Related

Passing a parameter to a webhook

Want to pass and retrieve a query string to my twilio webhook.
http://xx.xx.xxx.xx/TwilioWebhookTraffic/TwilioWebHookTraffic.aspx/TrafficCallBack?GCAcctNbr=667118358011603
which returns:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form method="post" action="./TrafficCallBack?GCAcctNbr=667118358011603" id="form1">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="4PSLlcjmwjYT0iXthm7eB3EX5v8lZY62GKDxWDdNDuZndwHLxahDzcX2H0NFNQX+2NAe7hPownCNYxJJVZJreGwJpqZ/Cwm3f2EIiLGFQ4c=" />
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CFB6114E" />
<div>
TWILIO TRAFFIC REMINDER WEBHOOK ASPX PAGE</div>
</form>
</body>
</html>
But does not run the webhook code.
if the URL is just:
http://xx.xx.xxx.xx/TwilioWebhookTraffic/TwilioWebHookTraffic.aspx
then the code is run. but, of course I need the query string.

JSF2 Rich Faces issue

I am facing very strange issue using JSF2 (apache MyFaces 2 and Rich Faces 4.3)
Below is the xhtml code.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
</h:head>
<h:body>
<h:form id="form">
<a4j:commandButton immediate="true" value="Check" action="#{bean.someAction}"/>
</h:form>
</h:body>
</html>
When xhtml code is debugged using firebug and any of the rich faces tag is used , i am getting below error in debugger as :
SyntaxError: syntax error # http://localhost:8480/webAppName/javax.faces.resource/jsf.js.faces?ln=javax.faces&stage=Development:1
When <a4j:commandButton> tag is removed and plain jsf tag <h:commandButton> is used error is not thrown.
Also when <a4j:commandButton> is clicked , ReferenceError: RichFaces is not defined error is thrown.
Attaching the generated html code :
1)h:commandButton with f:ajax inside - (it gives ReferenceError: jsf is not defined error when button is clicked)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link rel="stylesheet" media="screen" type="text/css" href="/contextRoot/rfRes/skinning.ecss.faces" />
<script type="text/javascript" src="/contextRoot/javax.faces.resource/jsf.js.faces?ln=javax.faces&stage=Development"><!--
//--></script>
</head>
<body>
<form id="testForm" name="testForm" method="post" action="/contextRoot/pages/testPage.faces" enctype="application/x-www-form-urlencoded">
<input id="testForm:j_id_6" name="testForm:j_id_6" type="submit" value="Test" onclick="jsf.util.chain(document.getElementById('testForm:j_id_6'), event,'jsf.ajax.request(\'testForm:j_id_6\',event,{execute:\'testForm \',render:\'testForm \',\'javax.faces.behavior.event\':\'action\'})'); return false;"/>
<input type="hidden" name="testForm_SUBMIT" value="1" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="/6XulvXlIjDBkLb43C7I4+TCqUyuTMbk4Xz6pE7XonVsuqaL" />
</form>
<div id="javax_faces_developmentstage_messages"></div>
</body>
</html>
2) a4j:commandButton - (it gives ReferenceError: RichFaces is not defined error when button is clicked)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link rel="stylesheet" media="screen" type="text/css" href="/contextRoot/rfRes/skinning.ecss.faces" />
<script type="text/javascript" src="/contextRoot/javax.faces.resource/jsf.js.faces?ln=javax.faces&stage=Development"><!--
//--></script><script type="text/javascript" src="/contextRoot/javax.faces.resource/jquery.js.faces"><!--
//--></script><script type="text/javascript" src="/contextRoot/javax.faces.resource/richfaces.js.faces"><!--
//--></script><script type="text/javascript" src="/contextRoot/javax.faces.resource/richfaces-queue.js.faces"><!--
//--></script></head>
<body><form id="testForm" name="testForm" method="post" action="/contextRoot/pages/testPage.faces" enctype="application/x-www-form-urlencoded">
<input id="testForm:j_id_6" name="testForm:j_id_6" onclick="RichFaces.ajax("testForm:j_id_6",event,{"incId":"1"} );return false;" value="Test" type="submit" />
<input type="hidden" name="testForm_SUBMIT" value="1" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="DiY2dVKs1zXBkLb43C7I439MwZ/wfbTcBNpwPlLjsh6prC/c" />
</form>
<div id="javax_faces_developmentstage_messages"></div></body>
</html>

Problems having Jquery and Primefaces

I having problems putting a buttonset with Primefaces.
I saw some other posts
How to use jQuery and jQuery plugins with PrimeFaces
with similiar issues and didnĀ“t get any result.
heres the a code sample:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view locale="#{templateManager.userLocale}">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>#{msgs['report.title']}</title>
<h:outputStylesheet name="ssl-common.css" library="css"/>
<h:outputStylesheet name="final.css" library="css"/>
<link href="#{resource['img:favicon.ico']}" rel="icon"/>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
</h:head>
<body id="reportList">
<ui:include src="../WEB-INF/header.xhtml" />
<section>
<h:form prependId="false">
<nav>
<div id="actionBar">
<div class="wraper">
<hgroup>
<h1>#{msgs['report.title']}</h1>
</hgroup>
<div id="subMenu" style="padding: 10px">
<script>
$(function() {
$("#radio").buttonset();
});
</script>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</div>
</div>
</div>
</nav>
(...)
<h:outputScript library="js" name="common.js"/>
<h:outputScript library="js" name="script.js"/>
<h:outputScript library="js" name="primefacesLocalePT-PT.js" />
<!--<h:outputScript library="js" name="jquery-ui-1.8.2.js" />-->
<script src="http://maps.google.com/maps/api/js?sensor=true&language=#{templateManager.userLocale}" type="text/javascript"/>
</body>
</f:view>
</html>
With this code I receive the error:
TypeError: $(...).buttonset is not a function
[Break On This Error]
$("#radio").buttonset();
does anybody had a similar problem?
You need to include jQuery UI, too. Right now the script tag for that is commented out.

jquery mobile checkbox display issue

Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.
The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.
Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:
Source which has error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width">
<link rel="stylesheet" href="../jQuery/jquery.mobile.css">
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Source which does not have error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.
Without the box, the user may think it is just a label
Since I am new, I am unable to give an image, I'm sorry...
Thanks all.
Adding checkbox inside fieldset for me solved the same problem.
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>

cross-domain post iframe

I want to POST data from my FORM to an IFRAME which is found on another domain. Is there any easy way to do this?
<iframe name="iframe" width="100" height="100" src="www.otherdomain.com" />
<form action="www.mydomain.com" method="post" target="iframe">
<input type="text" name="text1" value="123" />
<input type="text" name="text2" value="456" />
<input type="submit" value="submit"/>
</form>
I think your example should work. I've set two virtual hosts pastefrom.com pasteto.com
on my localhost.
http://pastefrom.com/index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<iframe name="iframe" id="iframe" src="http://pasteto.com/index.php" width="500" height="500"></iframe>
<form action="http://pasteto.com/index.php" method="post" target="iframe">
<input type="text" name="search" value="google" />
<input type="submit" value="submit"/>
</form>
</body>
</html>
http://pasteto.com/index.php:
<pre><?php var_dump($_POST);?></pre>
And on submit it shows post data on pasteto.com
array(1) {
["search"]=>
string(6) "google"
}

Resources