I'm using Rspec and Capybara.
How can I write a step to click on an image? I have been unable to find a good way to get Capybara to see the image as a link.
Thanks
Example of html
<a title="inGroups" href="/de/users/index/roles-list/serviceID/1112/inGroup/1">
<img border="0" alt="inGroups" src="/themes/system/images/icon/16/role_activate.png">
<a title="inGroups" href="/de/users/index/roles-list/serviceID/1114/inGroup/1">
<img border="0" alt="inGroups" src="/themes/system/images/icon/16/role_activate.png">
<a title="notInGroups" href="/de/users/index/roles-list/serviceID/1112/inGroup/0">
<img border="0" alt="notInGroups" src="/themes/system/images/icon/16/role_deactivate.png">
<a title="notInGroups" href="/de/users/index/roles-list/serviceID/1114/inGroup/0">
<img border="0" alt="notInGroups" src="/themes/system/images/icon/16/role_deactivate.png">
Any suggestions?
It shouldn't be any different to clicking a normal link. I don't see how you would go about selecting an individual link in your example though, without any uniquely identifiable attributes on the link.
If you can't change the markup, you may need to use XPath to actually select the href element by the URL e.g.
my_link = find(:xpath, "//a[contains(#href,'1114/inGroup/1')]")
Would give you the first link, and then
my_link.click
Should click it as normal.
EDIT: Just to clarify, the important thing is that you select the a element and click it, not the img.
I put this and works:
for the index.html got to the show:
find("img[src*='photo03.jpg']").click
for the show.html
expect(page).to have_css("img[src*='photo03.jpg']")
Related
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!
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
I want to link images on my index page, to their permalink page, but the tags don't seem to be working. It's not that the images are not linking to the correct place, they're simply not being rendered as links at all.
This is the code:
{block:Photo}
<article id="{PostID}" class="post photo">
**<img src="{PhotoURL-HighRes}" href="{Permalink}" alt="{PhotoAlt}"/>**
{block:IndexPage}
<div style="{block:ifShowPhotoCaption} display: none; {/block:ifShowPhotoCaption}" class="control">
{NoteCountWithLabel}
This should link the image on the index page to its permalink page, but it doesn't create a link at all, in the same way 'note count' label does, in the second block of code.
I've tried:
<img src="{PhotoURL-HighRes}"><a href="{Permalink}" alt="{PhotoAlt}"/>
Instead of the code I posted, but it makes no difference. I've also tried moving the {block:IndexPage} to before the {block:Photo} tag, but this doesn't work, and also has the effect of messing up the permalink page when I view it through the 'notes count' link.
My tumblr: http://ginnypig.tumblr.com/
Thanks in advance.
Fixed it.
The code needed to be:
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
As opposed to what I was using:
<img src="{PhotoURL-HighRes}" href="{Permalink}" alt="{PhotoAlt}"/>
I'm trying to open an image in new brrowser tab like this:
<a href="" target="_blank">
<img height="660px" width="420px"
src="<%= Url.Action("WebPageImage", "WPMManagement", new { id = actualId }) %>"
alt="bild mit webseiten version" />
</a>
I need to show just an image and nothing else (no styles etc.)
What about href? What do I need in it?
Change the href attribute to the URL of your image and you're good to go:
Click here to view the image
EDIT: If you're retrieving images from the database, then you'll need Url.Action rather than Url.Content. Check out this question for a similar discussion about retrieving images from a database.
EDIT #2: Updated the example code to use Url.Action rather than Url.Content
I have one image from which I have to have 7 different links based on the part of the image clicked. How do I go about it using rails?
For future reference, you're talking about "image maps" - there's various tutorials for these, eg
http://www.onextrapixel.com/2009/04/30/how-to-create-multiple-links-on-a-single-image-with-image-map/
As far as i know this isn't really a rails question, as image maps are a totally front-end thing: like js, they only relate to the page as seen in the browser. As far as rails is concerned, when you click on a link it doesn't care whether that link was on an image map or not.
So, it's just some raw html that you would put in your view template.
I suppose you could make the image maps data-driven though, so that for example you store an image filename in the db and then save any map data in the db too, in an image_maps table. It's only worth doing this if you want to make the image maps user-editable, like flicker does for example. (flickr lets you draw a rectangle on an existing photo and tag it with some text)
just use url_for to generate the needed url
<img usemap="image_link" src="..." alt="" width="235" height="32" style="display: block;" />
<map name="image_link">
<area href="<%= url_for root_path %>" alt="Home" coords="0,0,189,19" shape="rect" />
<area href="<%= url_for :controller => "post", :action => "all" %>" alt="All posts" coords="190,0,386,22" shape="rect" />
<area href="<%= url_for new_resource1_path %>" alt="New resource1" coords="387,0,657,23" shape="rect" />
</map>
the root_path is defined as the home page and resource1 as a resource in config/routes.rb.
This is more of a javascript/flash type thing. You can absolutely position divs with links if you know exactly where the links need to go and you are not looking for an area for the user to click because this will just generate a link with text in a specific position.
Sounds to mee like you will need to make a flash app or do javascript workaround. This is not a Rails type issue so your solution won't come from Ruby/Rails.