How do I click an image without an ID, running a dynamic numeric process? - html

I need to automate the deleting of a file for clean up purposes
<img src="/images/delete.jpg" class="pointer" alt="delete" title="delete" onclick="DeleteThis('[stable number]', '[dynamic file number]')">
The dynamic file number increases per file and should be wildcarded.
I tried...
page.find('a[href*="javascript:DeleteThis"]').click #1
first(page.find(:css, "img.pointer", "[alt='delete']")).click #2
both are not found.
Any ideas?

Your selectors are incorrect. first doesn't accept Capybara::Element as a parameter. It should be just:
page.find(:css, "img.pointer[alt='delete']")
or even (if Capybara.default_selector = :css):
page.find("img.pointer[alt='delete']")
It's :css by default.

Related

using href or routerlink with #

I'm fairly new to changing paths / position of page so I would like a little help on this.
Say, when a button is clicked, I want to scroll down to another portion of the page. (where id of that section is 'xyz') however, I'm using an entirely different component to access that section.
If I were to use href, I can easily do : href="/app/appid#xyz"
however, if appid is a variable retrieved from the ts file, how can I insert it into my href?
It's easier to to use [routerlink]="['app', appid]" but how can I insert the "#xyz" into my string?
Or is there a completely separate and easier functionality I can use?
Thank you
Add the frament attribute:
<a [routerLink]="['app', appid] fragment="xyz">Link</a>
https://angular.io/api/router/RouterLink

How do I set AG-Grid's height to automatically match the data content height?

I'm trying to get ag-grid's height to match the content.
I have several sets of data which I'm trying to load into different grids, each with the appropriate height for the data.
There is an AutoHeight option but the Angular version doesn't seem to work (I'm assuming this is for a previous version).
Here is my alternative attempt, which doesn't work:
<ng-container *ngFor="let reportItem of reportData">
<br />
<ag-grid-angular style="width: 100%; height: {{ 560 + (reportItem.data.length * 40) }}px;"
class="ag-theme-material bold-headers"
[rowData]="reportItem.data"
[columnDefs]="columnDefs">
</ag-grid-angular>
</ng-container>
Does anyone have a better suggestion?
Rather than just linking to the Auto-Grid Height method I described at the top - which I tried and failed with, could you please explain how I should implement it with my code above? (as I accept I may have missed something)
Thanks
There is the setGridAutoHeight method available on the api object. You need to get a reference to that object from the gridReady event and then you can call it, passing true to it. You have to take care with it if your data has many rows because using this method all the rows will be rendered to the DOM, normally only the visible ones are rendered.
gridApi.setGridAutoHeight(true)
It's at the bottom of the page: https://www.ag-grid.com/javascript-grid-api/
according to this link you can use domLayout='autoHeight' as a property to your grid.
it worked for me.

ng-src not showing up for my img array

I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"

Trying to click on a hyperlink for a row with specific value in Selenium IDE

I'm new to Selenium, There are 2 things I need to do
1. To take a note of the file name on the html but its part of a string so dont know how to concatenate it in Selenium IDE
2. In a table, after searching for the relevant file, I would like to click on a link in one of the other columns for that row. So For the file EMED.pdf, I would like to click the Requested link
HTML snippet:
<td>
<a class="OSfileLink" target="selenium_blank7934" href="/Practice/DownloadFile/8057329d-21df-4a44-baee-2068fc01b7dd" rel="EMED.pdf" style="background-color: transparent;">EMED.pdf</a>
</td>
<td></td>
<td> 27/02/2013 16:19:16 </td>
<td>
<a class="eApproval " data-toggle="modal" data-fileid="8057329d-21df-4a44-baee-2068fc01b7dd" href="#" rel="Requested (28/02/2013)" style="background-color: transparent;">Requested (28/02/2013)</a>
</td>
So far I have :
Command: click
Target: //a[contains(text(),'Requested ')]/following-sibling::a[contains(text(),'EMED.pdf')]
value :
This brings up an error:
[error] Element //a[contains(text(),'Requested ')]/following-sibling::a[contains(text(),'EMED.pdf')] not found
I can "Find" the individual xpath's seperately, but they dont work together. Any help will be appreciated.
Edit
Still no joy with the concatenation, but can work round it with the click being identified.
Any help with concatenation will be much apprciated
* EDIT
Concatenation: For: href="/Practice/DownloadFile/8057329d-21df-4a44-baee-2068fc01b7dd"
I'd like the guid: 8057329d-21df-4a44-baee-2068fc01b7dd from the whole link.
Thanks
Looks like you have your order swapped, try replacing following-sibling with preceding-sibling. Also note you want the <a> nodes, but the following-sibling function is checking the next node after <a>, which is <td>, so you'll need to start with the <td> nodes and check the content of each <a> node within.
Or the other way around, you could change which node you're starting your search with. If you want the "EMED.pdf" but only if the next node is "Requested", try something like this:
//td[contains(a/text(),'EMED.pdf')]/following-sibling::td[contains(a/text(),'Requested')]/a
based on the html you put up, I think this works, I tested it with firefox xpath tester
//.[td[a[contains(text(),'EMED.pdf')]]]//a[contains(text(),'Requested')]

How to use #Url.Content within an IF statement in a razor file?

I have a mvc 4 project where I am using image references that look like this:
<img alt="Progress Update" class="projectListNotificationIcon" src="#Url.Content("~/Images/progressUpdateIcon.png")"/>
The #Url.Content is necessary for it to work on both the local copy of this project, as well as the live server copy. This works great, however I have another place where I am choosing between 2 different images and tha code looks like this:
var imagePath = (item.IsOverdue) ? "../../Images/lateIcon.png" : "../../Images/onTimeIcon.png";
How can I use some permutation of the #Url.Content in my if statement above? The current way that I am doing it works in the local project, but not on the server.
Try:
<img src="#((item.IsOverdue) ? Url.Content("~/path/img1.jpg") : Url.Content("~/path/img2.jpg"))" alt="whatever" />
Use of the tilde (~) sign is probably the key, as that resolves the url relative to the root of the site.
<img src="#(item.IsOverdue ? "~/path/img1.jpg" : "~/path/img2.jpg")" />
With asp.net mvc 4 urls that begin with the ~ symbol are automatically translated to site relative paths. Read about it here http://www.davidhayden.me/blog/asp.net-mvc-4-the-new-tilde-slash-feature-in-razor-2