I would like to assert that a table row contains the data that I expect in two different tables.
Using the following HTML as an example:
<table>
<tr>
<th>Table 1</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
</tr>
</table>
<table>
<tr>
<th>Table 2</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>different data</td>
</tr>
</table>
The following assertion passes:
$this->assertElementPresent('css=table:contains(Table 1)');
However, this one doesn't:
$this->assertElementPresent('css=table:contains(Table 1) tr:contains(Row 1 Col 1)');
And ultimately, I need to be able to test that both columns within the table row contain the data that I expect:
$this->assertElementPresent('css=table:contains(Table 1) tr:contains(Row 1 Col 1):contains(Row 1 Col 2)');
$this->assertElementPresent('css=table:contains(Table 2) tr:contains(Row 1 Col 1):contains(different data)');
What am I doing wrong? How can I achieve this?
Update:
Sounds like the problem is a bug in Selenium when trying to select descendants.
The only way I was able to get this to work was to add an extra identifier on the table so I could tell which one I was working with:
/* HTML */
<table id="table-1">
/* PHP */
$this->assertElementPresent("css=#table-1 tr:contains(Row 1 Col 1):contains(Row 1 Col 2)");
This is probably due to a bug in the CSS selector library used by Selenium. As a workaround you might want to try the following:
css=table:contains(Table 1) > tbody tr:contains(Row 1 Col 1)
Details of the bug can be found here: http://jira.openqa.org/browse/SEL-698
Related
I am trying to create a table in reactjs using bootstrap. Everything seems fine except:
As you can see, the titles inside the thead tag is not aligned exactly above its corresponding td tag. Is there a way to do it?
Here is the code:
<Table striped hover responsive >
<thead>
<tr>
<th>Rank</th>
<th>Logo</th>
<th>Name</th>
<th ></th>
<th>Wins</th>
<th>Loss</th>
<th>Draws</th>
<th>Games</th>
<th>GF</th>
<th>GA</th>
</tr>
</thead>
<tbody>
{team && team.map((team, key) =>{
return <tr key={key}>
<td>{key + 1}</td>
<td><img src={team.team.logos[0].href} alt='team logo' width={40} height={40}/></td>
<td >{team.team.name}</td>
<td>{team.stats[0].value}</td>
<td>{team.stats[1].value}</td>
<td>{team.stats[2].value}</td>
<td>{team.stats[3].value}</td>
<td>{team.stats[4].value}</td>
<td>{team.stats[5].value}</td>
</tr>
})}
</tbody>
</Table>
I cannot see the code, but there seems to be some margin for the td. But you will still have issues with it lining up due to the number of words in td to the data listed. A solution would be styling each td by itself until you get it how you'd like.
I am transforming HTML into a beautiful and tidy CSV. I have a file full of tables and with few classes. I have three types of tables, and their structure is the same. The only difference is the content within the "th" element which comes after the element in which I am interested. How can I get only the content of the tables that have certain text in "th" ("text_that_I_want_to_get")? Is there a way to insert a class with R inside each type of table?
Type 1 of table
<tr>
<th class="array">text_that_I_want_to_get</th>
<td class="array">
<table>
<thead>
<tr>
<th class="string">name</th>
<th class="string">mean</th>
<th class="string">stdev</th>
</tr>
</thead>
<tbody>
Type 2 of table
<tr>
<th class="array">text_that_I_want_to_get</th>
<td class="array">
<table>
<thead>
<tr>
<th class="string">name</th>
<th class="array">answers</th>
</tr>
</thead>
<tbody>
Type 3 of table
<tr>
<th class="array">text_that_I_want_to_get</th>
<td class="array">
<table>
<thead>
<tr>
<th class="string">Reference</th>
</tr>
</thead>
<tbody>
You need the following three xpaths:
xpath1 <- "//td[table[./thead/tr/th/text() = 'stdev']]/preceding-sibling::th"
xpath2 <- "//td[table[./thead/tr/th/text() = 'answers']]/preceding-sibling::th"
xpath3 <- "//td[table[./thead/tr/th/text() = 'Reference']]/preceding-sibling::th"
These find the td node that is at the root of each of the three table types, then locate the preceding th sibling with the text you want.
So to get "text_that_I_want_to_get" for table type 1, you do:
read_html(url) %>% html_nodes(xpath = xpath1) %>% html_text()
#> [1] "text_that_I_want_to_get"
And you can do the same with xpath2 and xpath3 to get text from table type 2 and table type 3.
I have a specific table to display.
It displays an array of objects.
My object contains:
common data (displayed in black in the table)
'income' specific data (displayed in red in the table)
'depense' specific data (displayed in green in the table)
I did something that looks like what I want but I'm not sure I did it in the clean way.
plunkr
<table border=1>
<thead>
<tr>
<th></th>
<th colspan=5>Depense</th>
<th colspan=5>Income</th>
</tr>
<tr>
<th rowspan=2> id invoice</th>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
<th>title9</th>
<th>title10</th>
</tr>
<tr>
<th>depense1</th>
<th>depense2</th>
<th>depense3</th>
<th>depense4</th>
<th>depense5</th>
<th>income1</th>
<th>income2</th>
<th>income3</th>
<th>income4</th>
<th>income5</th>
</tr>
</thead>
<tbody>
<tr >
<td rowspan=2>id invoice : 10</td>
<td>10/02/2015</td>
<td>tartenpion</td>
<td>II</td>
<td>AA</td>
<td>1.25</td>
<td>FRED</td>
<td>fact 12</td>
<td>10</td>
<td>13</td>
<td>xx</td>
</tr>
<tr>
<td>avoir1</td>
<td>avoir2</td>
<td>avoir3</td>
<td>avoir4</td>
<td>avoir5</td>
<td>vente1</td>
<td>vente2</td>
<td>vente3</td>
<td>vente4</td>
<td>vente5</td>
</tr>
</tbody>
</table>
Plus : in order to display each record on two rows I had to add a column called "id invoice", then as I don't want it to be display I added some css to hide it.
I am pretty sure my code is dirty, but I don't know how to do that another way.
If someone can help me on this...
How to select table rows excluding first row. Number of table rows could vary.
Here is example:
<table id="grdVerzekeringen" >
<tr>
<th>First name</th><th>Last name</th>
</tr>
<tr>
<td>Pera</td><td>Peric</td>
</tr>
<tr>
<td>Mika</td><td>Mikic</td>
</tr>
<tr>
<td>Zika</td><td>Zikic</td>
</tr>
</table>
In this example I want to select table rows that have actual data not header data. I could use css selectors or XPath.
If the header row uses th, you are lucky. Just use the following XPath expression:
table[#id="grdVerzekeringen"]/tr[td]
If the header uses td as well, you can use the position() function:
table[#id="..."]/tr[position()>1]
My question is pretty basic but cannot find an answer on Google. I do wonder if I missed something about the ice:column component.
I do use code like :
<ice:panelGrid columns="3">
<ice:column style="background-color: yellow;">
<ice:outputText value="..." />
</ice:column>
<ice:column>
// row content
</ice:column>
<ice:column>
// row content
</ice:column>
// other rows
</ice:panelGrid>
It seems that the column component has a style and styleClass attribute, however nothing is ever rendered in the HTML.
How do you apply a style to a perticular cell of a table with IceFaces ?
Thanks in advance for the answer.
Like as standard JSF <h:panelGrid> the <ice:panelGrid> has a columnClasses attribute which allows you to specify a comma-separated list of column classes which are to be applied subsequently on the columns. Also, in standard JSF <h:panelGrid>, the <h:column> is not supported. This is only suppored in <h:dataTable>. Instead, every direct child of <h:panelGrid> is treated as a single column, which can be just <h:outputText> or <h:panelGroup> if you have multiple components which need to go in a single column.
So, this should do:
<ice:panelGrid columns="3" columnClasses="col1,col2,col3">
<ice:panelGroup>row 1 col 1</ice:panelGroup>
<ice:panelGroup>row 1 col 2</ice:panelGroup>
<ice:panelGroup>row 1 col 3</ice:panelGroup>
<ice:panelGroup>row 2 col 1</ice:panelGroup>
<ice:panelGroup>row 2 col 2</ice:panelGroup>
<ice:panelGroup>row 2 col 3</ice:panelGroup>
...
</ice:panelGrid>
which will generate
<table>
<tbody>
<tr>
<td class="col1">row 1 col 1</td>
<td class="col2">row 1 col 2</td>
<td class="col3">row 1 col 3</td>
</tr>
<tr>
<td class="col1">row 2 col 1</td>
<td class="col2">row 2 col 2</td>
<td class="col3">row 2 col 3</td>
</tr>
...
</tbody>
</table>
You can specify the style in the .col1, .col2 and .col3 classes the usual way.
.col1 {
background: yellow;
}