Databases
StackOverflow2013
Postsdbo
POGet the value of a particular css element id from child css element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGet the value of a particular css element id from child css element
    primarykey
    data
    text
    <p>I am using <em>Selenium WebDriver</em> wrapped in <em>PHPUnit</em> and <em>Sausage</em> to test clicking a button in a specific row in a table that's laid out similar to:</p> <pre><code>&lt;tr id="dynamically generated 1"&gt; &lt;td class="foo"&gt; &lt;div class="bar"&gt;&lt;/div&gt; &lt;/td&gt; &lt;td class = "mybutton"&gt; &lt;span class = "icon clickable"&gt;&lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr id="dynamically generated 2"&gt; &lt;td class="foo"&gt; &lt;div class="baz"&gt;&lt;/div&gt; &lt;/td&gt; &lt;td class = "mybutton"&gt; &lt;span class = "icon clickable"&gt;&lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>In particular, I want to click a specific element <code>#mybutton &gt; span.icon.clickable</code> whose sibling is <code>.foo</code> with child <code>.baz</code>. The "<em>whose sibling is <code>.foo</code> with child <code>.baz</code></em>" requirement is the only way I can currently identify the correct element, as other rows in the same table have element <code>#mybutton &gt; span.icon.clickable</code>, and the ids for those rows are dynamically generated.</p> <p>At the moment I am using XPath, but as you might expect, performance on <code>FF</code> and <code>IE</code> is horrendous. Is there a method for retrieving the value of <code>tr#id</code> from the element <code>tr#id div.bar</code>? If I can get this, I can use the id to use CSS to find the element I am looking for. I am using PHP, but a solution in any language would be useful. </p> <p>Alternatively, a more straightforward CSS3 solution would work, but after quite a bit of reading, I've all but concluded that using a standard CSS3 selector is not an option for this case. Just in case there is something I'm missing, is there a CSS3 solution for this? I know there is a CSS4 solution, but I need full browser support, so until all the browsers I am testing support CSS4, I'll have to rely on CSS3.</p> <p>Thanks in advance.</p> <p><strong>EDIT:</strong> Until there is better cross-browser support for CSS4, I need to use CSS3</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USClandestine
    1. USClandestine
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGet the value of a particular css element id from child css element
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POGet the value of a particular css element id from child css element
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POGet the value of a particular css element id from child css element
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload