Xpath based on another element value - xpath

I need to use Selenium Java to click on some links based on another element in the same line. I have the following HTML:
HTML image
I need to click on the span link (red color) of every line which contains that empty checkbox (green color). I can find all empty checkboxes by using xpath //img[contains(#src,'completion-auto-n')], but I can't find a XPATH to click on these span based on the checkbox's values.

From the img elements, you could use the ancestor:: axis with a predicate to look up the tree for the first div, and then look down the tree with the // descendant axis from that div for an span that is a child of an a:
//img[contains(#src,'completion-auto-n')]/ancestor::div[1]//a/span

Related

How to identify a new element in cucumber serenity framework on page when an add new button is clicked and that element is added

As title says I am attempting to identify a new element that is added to a page after an add new button is clicked that shares an xpath the same as many other elements.
To give some background there is a list of items on the page. You can interact with the list in the following ways. Add New, Edit and Delete.
You can add a new row to the list. When you click add new you type in text to name the item in the list and then have the option to save or cancel.
The cancel element (new row) is the same as the delete element (existing row) in terms of xpath (except where it is on the list).
I can't use the specific list element because this is an automation script that would run everyday and the position on the list could change.
Any thought on what I could do to do identify the xpath of the new cancel button when add new is clicked.
The button itself does not contain words but is an image of a trashcan, so I can't use something like text to find a cancel button.
I saw some ways to add text to find by but the issue I'd run into is that a user could generate this new row at anytime.
Any thoughts would be helpful! :)
Thanks!
To identify the new cancel button, you can try and tweak (it's a wild guess) one the following XPath expressions :
If the trash is an image, we look for an element which child contains a #src attribute (the name of the image : trash.gif for example).
//*[./*[contains(#src,"trash.gif")]]
If the trash is an icon, we can search the same way as before (you need to identify the name of the icon) :
//*[./i[contains(#class,"trash")]]

Wrap multiple lines in one div

Currently in CKeditor, the style drop-down let you wrap content with block or inline tags.
If you select multiples lines in the editor and chose a div element in the style menu, each lines will be wrapped individually in a div element.
Is it possible to select multiple lines and then wrap them in one div?

How to dynamically append unknown number of div elements to your svg

I need to append a number of div elements based on the result of calling my db, and inside those div elements append other elements.
For example, I get back 10 rows, so I have to append 10 texts and 10 lines (the divs) on each of which I am appending some circles based on the data for each row. Since the number of circles is unbounded, I was thinking of appending a scrollable div.
Now that I have done this, the elements are appended with the right attributes (according to developer tools), but one cannot see them on the page!
Is there a way to dynamically append divs so that the elements within them are visible?

Get cursor position in CKEditor 4 within edited element's HTML

I use inline CKEditor for editing elements on my page. So when I click into DIV with some class, CKEditor is attached to it and when it loses focus, editor instance is destroyed. I need to insert HTML element into that DIV after CKEditor instance is destroyed - to the last position of cursor before destroying editor instance. So I basicaly need to know index of cursor in edited element's HTML, as it would be taken as a plain text (for this example below it would be 25). I don't want to modify original data.
I have HTML in my DIV like this:
"some <span>text</span> wi|th <b>html</b> tags" (where "|" is cursor position)
I tried to get range and extend it to the start of editable element:
var range = editor.getSelection().getRanges()[ 0 ];
range.collapse( true );
range.setStartAt( editor.editable(), CKEDITOR.POSITION_AFTER_START );
Here range.endOffset is 3 (the same as if I didn't extend range). But even if I sum up offsets of more elements, it wouldn't solve my problem, because it exclude HTML tags.
You won't be able to use ranges if you want to use them after the editor is destroyed, because while being destroyed the editor replaces editable's inner HTML with the data and they are not the same thing.
Instead, you should create a marker for the selection before the editor is destroyed and find this marker in the data.
See this topic for ideas how to achieve that: Retain cursor position after reloading the page in CKEditor.

When handling browser events in a GWT CellTable, how do I get the most specific within a cell?

The onBrowserEvent method of an abstract cell returns a parent element.
If I have multiple HTML items rendered within the cell, such as spans or divs, how do I get and distinguish which one triggered the event?
NativeEvent#getEventTarget() will give you the exact element that fired the event. You can then walk up until you find an element with some discriminant (e.g. a specific CSS class name), or walk down from the parent element and use Element#isOrHasChild().
Have a look at how CompositeCell dispatches the event to the appropriate cell,or how ButtonCell checks that you clicked the button inside the cell.

Resources