i'm trying to get the texts (answers) next to the radiobuttons, to compare them with the correct answer.
Here is the html part:
<tbody>
<tr>
<td class="middle" width="15">
<input name="multiple_choice_result" value="0" id="0" type="radio">
</td>
<td class="middle">
<label for="0">FIRST ANSWER</label> // This text
</td>
</tr>
<tr>
<td class="middle" width="15">
<input name="multiple_choice_result" value="1" id="1" type="radio">
</td>
<td class="middle">
<label for="1">SECOND ANSWER</label> //This text
</td>
</tr>
<tr>
<td class="middle" width="15">
<input name="multiple_choice_result" value="2" id="2" type="radio">
</td>
<td class="middle">
<label for="2">THIRD ANSWER</label> //This text
</td>
</tr>
</tbody>
Use below Xpath:-
//label[contains(.,'ANSWER')]
Note:- Above xpath will return 3 elements so I am using List
List<WebElement> allanswer = driver.findElements(By.xpath("//label[contains(.,'ANSWER')]"));
for(WebElement answer: allanswer){
System.out.println(answer.getText());
}
If you want any particular answer then use:-
//label[contains(.,'FIRST ANSWER')]
Replace FIRST with SECOND OR THIRD according to your need
String answer =driver.findElement(By.xpath("//label[contains(.,'FIRST ANSWER')]")).getText();
Hope it will help you :)
Related
So I have written the following code and I cannot make same response as I was asked to. the text does not align properly in form. The text isn't like aligned right and feilds on left. I Please suggest a fix as simple as you can.
<form align="center">
<p>Name:
<input type="text">
</p>
<p>Address
<input type="text">
</p>
<p>Email ID:
<input type="text">
</p>
<p>How many Peices of fruit<br>
do you eat per day?
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2<br>
</p>
<label>Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<p>Would you like a <br /> brochure?
<input type="checkbox" align="right">
</p>
<input type="submit">
</form>
How it was supposed to look like
How it looks like
I had a hard time understand how you had been writing this code:
<form align="center">
and
<input type="checkbox" align="right"/>
As align is not a valid attribute of an input or form tag.
But what it looks like is that it used, and has long since been removed.
https://www.w3.org/TR/html401/present/graphics.html#adef-align
Note that on my browser (Firefox 81.0) your code doesn't center align like it does in your picture:
So that suggests to me that you are using an old browser.
I recommend using the MDN documentation to see what is elements are supported.
However, if you are supporting outdated then that's a whole discipline in itself.
This page lists all available HTML attributes:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
To give you a useful answer though - judging on the 'supposed to look like' image, it looks like you want to be using a table.
<form>
<table>
<tr>
<td align="right">Name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">Address</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"> Email ID:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td align="right"> How many Peices of fruit do you eat per day?</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2 </td>
</tr>
<tr>
<td align="right">
Degree:
</td>
<td>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a brochure</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td> <input type="submit"></td>
</table>
</form>
Note here, we do use the align attribute. As you can see, according to the MDN documentation, align is supported on a td element, but is deprecated, meaning that it's not advisable to use it.
Do you want like this? Only html:
<form>
<table align="center">
<tr>
<td align="right">Name </td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Address </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Email ID </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td>
<label for="rdbGender">
<br>
How many Peices of fruit <br> do you eat per day?<br><br><br><br>
</label>
</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender">0<br>
<input type="radio" name="rdbGender" id="rdbGender">1<br>
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</td>
</tr>
<tr>
<td align="right">
<br>
<label for="degree">
My favourite fruit <br><br><br><br><br>
</label>
</td>
<td>
<select id="degree" multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a <br>
brochure
</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td>
<br>
<input type="submit">
</td>
</table>
</form>
I suggest you to use CSS Grid to accomplish this job:
form {
display: grid;
grid-template-columns: 150px 200px;
text-align: center;
}
.first-column {
text-align: right;
}
input, select {
margin-left: 5px;
margin-bottom: 5px;
}
.check-area label {
display: block;
text-align: left;
}
.submit-button {
grid-column-start: 2;
text-align: left;
}
<form>
<label class="first-column">Name:</label><input type="text">
<label class="first-column">Address</label><input type="text">
<label class="first-column">Email ID:</label><input type="text">
<div class="first-column">
How many Peices of fruit<br>do you eat per day?
</div>
<div class="check-area">
<label>
<input type="radio" name="rdbGender" id="rdbGender">0
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">1
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">2
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</label>
</div>
<label class="first-column">Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<label class="first-column">Would you like a<br>brochure?</label>
<input type="checkbox" align="right">
<div class="submit-button"><input type="submit"></div>
</form>
I want to fix my TD width, I used the width="50%" but it isn't fixing, it is changing all table width, and I don't want to use css. I want to make it like this width on line 2 and 3 for city and gender ; any idea to fix only this line without changing all width table?
<html>
<head>
<title> Table New </title>
</head>
<body>
<table align="center" border="1">
<tr>
<td> <img src="1.jpg" width="100" > </td>
<td colspan="2"> Welcome To <br> My Website </td>
</tr>
<tr>
<td> City : </td>
<td> <input type="radio" name="v1" checked> Beirut </td>
<td> <input type="radio" name="v1"> Paris </td>
</tr>
<tr>
<td> Gender : </td>
<td> <input type="radio" name="v2" checked> Male </td>
<td> <input type="radio" name="v2"> Female </td>
</tr>
<tr>
<td> Name </td>
<td> First Name : <input type="text" name="v3"> </td>
<td> Last Name : <input type="text" name="v3"> </td>
</tr>
<tr>
<td> Photos </td>
<td> <input type="file" name="v4"> <br> <input type="file" name="v4"> <br> <input type="file" name="v4"> </td>
<td> <input type="submit" name="v5" value="send" style="float:right;" > </td>
</tr>
</table>
</body>
</html>
It's not possible by only changing those two tr. Here's one possible solution, adding another pseudo column on the left:
<table align="center" border="1">
<tr>
<td> <img src="1.jpg" width="100" > </td>
<td colspan="3"> Welcome To <br> My Website </td>
</tr>
<tr>
<td> City : </td>
<td width="100px"> <input type="radio" name="v1" checked> Beirut </td>
<td colspan="2"> <input type="radio" name="v1"> Paris </td>
</tr>
<tr>
<td> Gender : </td>
<td> <input type="radio" name="v2" checked> Male </td>
<td colspan="2"> <input type="radio" name="v2"> Female </td>
</tr>
<tr>
<td> Name </td>
<td colspan="2"> First Name : <input type="text" name="v3"> </td>
<td> Last Name : <input type="text" name="v3"> </td>
</tr>
<tr>
<td> Photos </td>
<td colspan="2"> <input type="file" name="v4"> <br> <input type="file" name="v4"> <br> <input type="file" name="v4"> </td>
<td> <input type="submit" name="v5" value="send" style="float:right;" > </td>
</tr>
</table>
However, this is a good example why it's not considered good practice to use html table and colspan - it quite soon gets rather complicated. But in this case, unless you add a lot of new rows or change the layout a lot, it probably works just fine.
I have table and I would like to put my td's under th tags. Here is my HTML code:
<table>
<tr>
<th>Your Email</th>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
</tr>
<tr>
<th>Job Category</th>
//I need break line here
<td>
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
<tr>
</table>
My output gives me text in <th> tags and then text in <td> tags next to it. I would like to have td content below th. I tried to use <br> tags but looks like that does not work outside of td tags. If anyone know the best and way to fix this please let me know.
You are creating a table and nothing can be put outside the table cells. If you want to have the forms element under the headers, just create one row with headers and one row with forms elements:
<table>
<tr>
<th>Your Email</th>
<th>Job Category</th>
</tr>
<tr>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
<td>
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
<tr>
</table>
Put your table header in its own row:
<table>
<tr>
<th scope="row">Your Email</th>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
</tr>
<tr>
<th colspan="2">Job Category</th>
</tr>
<tr>
//I need break line here
<td colspan="2">
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
</tr>
</table>
Place them in different rows using
<table>
<tr>
<th scope="row">Your Email</th>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
</tr>
<tr>
<th>Job Category</th>
</tr>//End row
//I need break line here
<tr> //start new row
<td>
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
<tr>
</table>
I have a page with radio button that doesn't show the bullet only for same row (name='197' and value='_ for example') DEMO
E.g.
this is the code for the line
<tr>
<td class="generic">197</td>
<td class="generic">PARASPRUZZI RUOTE POSTERIORI</td>
<td>
</td>
<td align="center">
<input type="radio" value="S" name="197" userselection="1">
</td>
<td align="center">
<input type="radio" value="_" name="197" checked="">
</td>
<td align="center">
<input type="radio" value="N" name="197" disabled="">
</td>
</tr>
I don't see where is the mistakes, can you help me?
Because further on down your code (some line ~4579) you have another set of <input>s with the same name 197. One of which has the checked attribute:
<tr>
<td class="Option_S">CMBDS</td>
<td></td>
<td class="Option_S">DIESEL</td>
<td align="center">
<input type="radio" value="S" name="197" checked="">
</td>
<td align="center">
<input type="radio" value="_" name="197" disabled="">
</td>
<td align="center">
<input type="radio" value="N" name="197" disabled="">
</td>
</tr>
JSFiddle
You have others radio with name 197 in html:
<tr>
<td class="Option_S">CMBDS</td>
<td></td>
<td class="Option_S">DIESEL</td>
<td align="center">
<input type="radio" value="S" name="197" checked="">
</td>
<td align="center">
<input type="radio" value="_" name="197" disabled="">
</td>
<td align="center">
<input type="radio" value="N" name="197" disabled="">
</td>
</tr>
I have the following HTML:
<tr>
<td class=tabTwo vAlign=top>
<table border=0 cellPadding=0 cellSpacing=0 width=100%>
<tr>
<td vAlign=top width=5%>4.</td>
<td>Test 1?</td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>a) <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>b) <input type="radio" name="S1Q4" value="b" id="s1q4b" /> <label for="s1q4b">B</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>c) <input type="radio" name="S1Q4" value="c" id="s1q4c" /> <label for="s1q4c">C</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>d) <input type="radio" name="S1Q4" value="d" id="s1q4d" /> <label for="s1q4d">D</label></td>
</tr>
</table>
</td>
</tr>
Produces:
How do I made the radio buttons align in a straight line? B & C seem crooked.
If you are going to use a table. Put the inputs in their own cell. The letter width of a),b) etc. is what is throwing of the alignment.
I would not use a table though. Your choice.
Your question seemed a little vague but to best my knowledge, the presence of bullets a) b) c) in the same cell is causing the problem. Here's my fiddle: http://jsfiddle.net/bTNvA/
I have tried to resolve this by moving bullets to other cell:
<tr>
<td width=5%> a) </td>
<td colSpan=2> <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
</tr>
HTML
<div class="form-wrapper">
<div class="radio-choice">
<span>a) </span>
<input id="option1" type="radio" name="opt1"/>
<label for="option1">Option 1</label>
</div>
<div class="radio-choice">
<span>b) </span>
<input id="option2" type="radio" name="opt2"/>
<label for="option2">Option 2</label>
</div>
<div class="radio-choice">
<span>c) </span>
<input id="option3" type="radio" name="opt3"/>
<label for="option3">Option 3</label>
</div>
</div>
CSS
.radio-choice * {
vertical-align: middle;
}
.form-wrapper div{
float: left;
clear: both;
}
.form-wrapper span {
display: inline-block;
width: 10px;
}
http://jsfiddle.net/NewwV/1/