Capybara: click on text within <span> - ruby-on-rails

I had a bot that would apply on indeed.com jobs. It would collect jobs then apply to them one by one. However, indeed recently made things a lot harder. Used to be able to just locate the button's id and use that but now the id is dynamic: changes from different job positions.
Does anyone know how it is possible to link to the "Apply Now" button (not really a botton) if the code below is:
<a class="indeed-apply-button" href="javascript:void(0);" id="indeed-ia-1532137767182-0">
<span class="indeed-apply-button-inner" id="indeed-ia-1532137767182-0inner">
<span class="indeed-apply-button-label" id="indeed-ia-1532137767182-0label">Apply Now</span>
<span class="indeed-apply-button-cm">
<img src="https://d3fw5vlhllyvee.cloudfront.net/indeedapply/s/14096d1/check.png" style="border: 0px;">
</span>
</span>
</a>

Many ways to click that element, the 3 simplest would probably be
click_link('Apply Now') # find link by partial text and click it
click_link(class: 'indeed-apply-button') # find and click link by class
find('span', text: 'Apply Now').click # find span by text and click in it

in my case I had to select an option shown using js-chosen library inside an iframe. So, its not a regular select tag. So had to do following to select:-
within_frame(find("#cci_form")) do
find('#showing_listing_id_chosen').click
find('[data-option-array-index="2"]').click
end
But, no luck using
find('.active-result[data-option-array-index="2"]').click
or
find('li[data-option-array-index="2"]').click

Related

adding tooltip to zendesk home_page.hbs

I want to add tooltips for some "Categories" box in Zendesk, so when the user hang over one box then I can show a tooltip with more information about the "Category".
Problem is that I'm trying to use IF statement like this:
{{#if href == '/hc/en-us/categories/360001117812-Cow-Traffic' }}
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
{{#if href == 'url_to_compare' }}
<a class="tooltiptext">tooltip_text</a>
{{/if}}
<span class="blocks-item-title">{{name}}</span>
<span class="blocks-item-description">{{excerpt description}}</span>
As this IF is inside of a {{#if}} of the categories I want to select in this example only one link using the href to see if the mouse is over or not the box.
I already tried to add a helper in the script.js file but looks like it's not working, I remember that there was a way to use this IF and IS to be able to solve it.
Thanks!
I get a lot of help on this, at the end I found that the better way to solve this is using a {{#is}} statement, So it's possible to use {{#is name "Category Name"}} {{/is}}
And this option will do a comparation between the name of the Category and the name you are looking for, if the value it's equal then you can do something inside, if not then you can use an {{else}} between and do another thing over there.
{{#is name "Category Name"}}
<div class="tooltip1">{{name}}<span class="tooltiptext">{{excerpt description}}</span></div>
{{else}}
<span class="blocks-item-title">{{name}}</span>
{{/is}}
I used the "Excerpt description" to add the value of the tooltip inside Zendesk, and no need to add it manually in the home_page.hbs code.
I added 3 different tooltips and working fine now. Thank you all!

Dropdown select in Capybara with no id?

So I have a few dropdowns im making some automated test cases for (just checking to make sure links work and go to the right location. Easy test cases to toss in there)
But I don't really have any id's or anything to work with:
Here is the outer HTML of the Dropdown text to click (which reveals more dropdowns).
<i class="glyphicon glyphicon-list-alt"></i> Main Dropdown <b class="caret"></b>
The rest of the items are listed like this:
<li><i class="glyphicon glyphicon-list"></i> Option 1</li>
Would it make more sense to just try to use the clickable text to click on the "Main Dropdown" text and then the clickable text to click on "Option 1" (names were changed but the concept is still the same).
Since that's really all the HTML is in there?
Capybaras link finder finds link elements by id, text, title or contained images alt attribute. With the html provided your best best for those is the text - so
click_link('Main Dropdown') # open the dropdown
click_link('Option 1') # wait for the link to become visible and then click it

ng-model color (in angular dart)

I am trying to bind color input using ng-model. In the following code:
<ul>
<li ng-repeat="col in ctrl.maincols">
<p>{{col.attr}}:{{col.value}}
<input type="color" ng-model="col.value"></p>
</li>
</ul>
there is no reaction when I select a colour. However if I change the input type to text everything works fine.
Any suggestions for making this work, or an alternative to ng-model for this use case?
It seems an editor for <input type="color"> is not yet implemented
see https://github.com/angular/angular.dart/blob/master/lib/directive/ng_model.dart
You could try to copy a similar and customize it to your needs.
You could also create a feature request. Please add a link here if you do.

jquery Mobile - Auto Divider

I'm using the jquery Mobile AutoDivider for a web project of mine and it works great in IE8, but for some reason in Chrome it's not generating the headers for me.
My question is: How exactly does the AutoDivider determine what to make a 'divider'? Is is just the first item within your <li></li>?
Here's my basic HTML structure (it's ultimately placed in a ASP.Net Repeater:
<ul data-role="listview" data-autodividers="true">
<li>
<img src="mySource.jpg" alt="" />
<h3>John Doe</h3>
<p><strong>Company Name Here</strong></p>
<p>User Address</p>
<p class="ui-li-aside">
<strong style="display: none;"><!-- This is what seems to make the headers in IE, placing this right here: -->
Last Name of Employee</strong>
</p>
</li>
</ul>
see the docu http://jquerymobile.com/demos/1.2.0/docs/lists/docs-lists.html
Autodividers
A listview can be configured to automatically generate dividers for its items. This is
done by adding a data-autodividers="true" attribute to any listview.
By default, the text used to create dividers is the uppercased first letter of the
item's text. Alternatively you can specify divider text by setting the > autodividersSelector option on the listview programmatically.

box email addresses like hotmail

I don't know what this is called hence having a hard time finding any reference on the net for this. On hotmail when you enter an email it boxes the email into a rectange block one by one on the same line with options to edit and delete the email. What is this and are there any sample code/frameworks to implement something similar?
Thanks.
It's normally a UL, and inside it you have LI which are either elements styled to have a box around them (emails, in your case), or a borderless INPUT box which blends into the surrounding UL of the same background. JavaScript code handles deletion and insertion of box LIs according to keyboard input. I am not aware of framework support for it, but it may exist.
EDIT: It exists. http://plugins.jquery.com/plugin-tags/tags for jQuery options.
I was looking for the same thing, and upon looking at the source code for it. It seems that they are using a UL like Amadan said, but its set up like this:
<div id="container">
<ul id="email_list">
<li class="email_token valid" id="a#a.com" email="a#a.com">
<p>a#a.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_token valid" id="b#b.com" email="b#b.com">
<p>b#b.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_input_container">
<textarea class="email_input_field"></textarea>
</li>
</ul>
</div>
EDIT: I ended up implementing it and it runs wonderfully!
Try to use Firefox+Firebug to inspect the elements in hotmail. It'll help you to find out yourself.

Resources