Watir-webdriver: Locating the last ul element on page - watir

Lets say ive got several( I dont know how many ) ul elements, Unfortunately they all have the same class, and their ids are generated randomly.
All i know is that the one i want is the last one.
Is there a way to easily locate it?

You can get a collection of the ul elements (using uls) and then take the last one (using last).
For example, given the page:
<html>
<ul><li>1</li></ul>
<ul><li>2</li></ul>
<ul><li>3</li></ul>
</html>
Then you can get the collection (ie all) ul elements with:
browser.uls
The ul collection includes a last method to get the last element:
browser.uls.last
#=> #<Watir::UList:0x4e3c436a located=false selector={:element=>(webdriver element)}>
browser.uls.last.text
#=> "3"

Related

Inline inside flex

I am currently using the following css to display a list of items with a flexbox
section ol li div ul {
display:flex;
flex-direction:row;
flex-wrap: wrap;
gap:7px;
row-gap:0;
list-style-type: none;
}
This satisfies me on all but one problem:
when I have a big item that will not fit entirely on the rest of the line, it will be set at the beginning of a new line, thus possibly making a huge part of the line before unused. I do not wish that (note that for small items, this is exactly what I want).
Initial goal (probably not achievable): I have been thinking on what kind of rule I would like and it would be something like "if more than x% of the line is wasted, then display the item inline instead". This would enable to continue filling the line.
I have currently abandoned on doing that with only html and css and I might consider trying to write such a rule in js later, but not for now (unless somebody has a very nice solution).
Current goal: I have thus decided to manually specify some items (that are "big") that should be inlined (sometimes using media queries, but we can ignore them for now). The idea is to add the following class to those objects.
.inlineitem {
display:inline;
}
Problem: display:inline; within a flex container does not work and I do not wish to change the whole flex container for the other items... Is there a way to achieve what I want ?

How to Check Parent Element of find_element_by_partial_link_text

I'm using the find_element_by_partial_link_text selector to find the "next" button, so that I can click it and continue crawling.
However, the issue I'm having is that sometimes the word "next" is also in other random links on the page, which breaks the script.
I've tried addressing this with the code below, which obviously doesn't work.
pagination_ul = ff.find_element_by_xpath('//*[contains(#id, "pagination-both-")]')
next_button = pagination_ul.find_element_by_partial_link_text('Next')
So my question is...
How can I retrieve and compare the parent element of a find_element_by_partial_link_text element?
In other words, how can I make sure that the parent of the find_element_by_partial_link_text is, say, a li element?
Try using below XPath:
driver.find_element_by_xpath('//div[starts-with(#id, "pagination-") and not(contains(#class, "hidden"))]//li[#class="a-last"]/a[text()="Next"]').click()
It looks more complicated then search by text content, but should work in all cases
Note that you might need to Wait for element to appear in DOM/to be clickable
If you want to find parent element of an element, then use the below approach:
For instance, let us take https://www.google.com webpage. The xpath for the mike icon is //div[#id='gs_st0']. To find the parent of that element, which is the search box, use 'child' axes as below.
//*[child::div[#id='gs_st0']]
The above xpath will fetch you the parent element of the child.
In your case, if your child element's xpath is: //a[text()='Next']
So to find the parent element of the 'Next' link, use below xpath:
parentElement = driver.find_element_by_xpath("//*[child::a[text()='Next']]")

Add class to list item in Orchard pager list

I need to add a class to the li tag in an orchard pager list.
I can see that the shape is built in CoreShapes.cs, and classes are being added to the first and last items. I don't want to edit Orchard source code and add itemTag.AddCssClass("my-class").
I can add an alternate for List, but this overrides lists on the whole site. ShapeTracing doesn't show any other alternates.
I have been debugging with Pager.cshtml and associated alternates .Last, .Link etc., but I can't get to the li between the link and ul.
I have read this article, but this only coves the stuff inside the li.
I have read this article, but this assumes I have Model.ContentItems.
There are similar questions on SO, but they only cover content items which actually have alternates.
Ideally I want to do something like add List.Pager.cshtml and in there do;
<li class="my-class">
#Display(Model)
</li>
Adding a alternate for the list shape is the way to go i think.
1) Add an alternate for your specific list like MyList.cshtml
2) Borrow some code from Orchard.Core/Shapes/Views/Menu.cshtml and add the following lines to MyList.cshtml:
var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);
if (items.Any()) {
items[%YourItem%].Classes.Add("my-class");
}
...
#DisplayChildren(Model)

CSS - z-index:-1 breaking in google chrome

Basically creating a webpage with a dropdown menu I wrote following a tutorial. My page layout consists of 3 separate tables which include 1 for the title/banner, one for the drop down menu and one for the body/content.
The problem I am having first off is that when I scroll over my drop-down menu it drops behind my body/content table. I found a fix for this which was to include z-index:-1. This worked perfectly in IE but after testing it in chrome it prevented links and iframes to be interacted with on the content/body table.
#bodytable {width:1100px;
height:100%;
margin:auto;
position:relative;
top:10px;
z-index:-1;
}
The entire .css code can be found here:
http://pastebin.com/T97JAjQ8
Try giving them each a positive z-index value. Obviously the higher numbes will be "on top" of the other with lesser value. Instaed of giving a table "-1", give it something positive, like 10 and make the dropdown menus "20". You can even set the z-index of the body, to 0 as a baseline.
I haven't confirmed this, but it could be that chrome doesn't like negative z-index values.
Giving Negative z-index makes your element to go under body or wrapper div and hence, prevent them to be interacted because the body element is on the top of that table when you click the event occurs on the body tag not table tag. You have to give positive z-index value. Default stack order of elements is determined the position where the element is defined. For example, your table will be have a larger z-index value if it is defined after menu div. You can fix your problem by changing only the current stack order. By just changing that negative value to positive.
element {
z-index:1;
}
The above code will set the target element to be on top of others beside the current stack order.

Expression Engine 2 Next/Previous Entry Linking with Full Entries List

I want to use the Next/Previous Entry Linking technique in EE2:
{exp:channel:next_entry}
<p>Next entry: {title}</p>
{/exp:channel:next_entry}
{exp:channel:prev_entry}
<p>Previous entry: {title}</p>
{/exp:channel:prev_entry}
When this works, I'm on a single entry ie. awesome.com/index.php/my-cool-entry, I can click page through the entries in that channel.
Is it possible to ALSO display a full list of the entries on this page while I'm looking at one article? I want to be able to show the list of entries as a way to navigate to a particular article.
Think of it like the way {pagination_links} builds links:
First Page < 1 2 3 > Last Page except instead of numbers I want to display parts of that entry, rather than just a number.
What bothers me is that {paginate} generates ugly URLs ie. awesome.com/index.php/articles/P1, I'd rather have awesome.com/index.php/articles/my-cool-entry. exp:channel:next_entry/prev_entry preserves the URL_title!
Is there a plug-in that can handle this kind of thing?
Embedding a template is the way to go.
Create a new template with an {exp:channel:entries} loop. Within that you can dump out the entries you want and display any info you want from them.
One thing to make sure of is to use the dynamic="no" parameter within the {exp:channel:entries}. It'll go something like this:
In your article page, embed another template:
{embed="article/full_list"}
And within the article/full_list template use a loop like:
{exp:channel:entries dynamic="no" channel="[YOUR CHANNEL]" LIMIT="10"}
{title}
{/exp:channel:entries}

Resources