I have a problem accessing this anchor in a div.
<div class="contractor">
<a title="Andrew" href="/humans/">Andrew</a>
</div>
How do you complete this beginning? I need the title, the href and the Text inside.
var contr = document.getElementsByClassName('contractor');
console.log(contr);
I need plain JavaScript, no jQuery
To get the data you need from the anchor, you can do the following by using query selector:
const anchor = document.querySelector(".contractor a");
const title = anchor.getAttribute("title");
const href = anchor.getAttribute("href");
const text = anchor.text;
You can use the ParentNode API. If you're confident that the contractor div will only have an HTMLAnchorElement child, you could do the following:
const contractors = document.getElementsByClassName(`contractor`);
const contractor = constractors[0];
const anchor = contractor.firstElementChild;
const title = anchor.title;
const href = anchor.href;
If there might be more than one child element under each contractor div, then you would instead use the ParentNode.children property instead of firstElementChild.
Related
Given the example html:
const fragment = (<div>Hello <span>world</span>. How are you <b>doing</b>?</div>)
Is there a way to ignore all the child html tags with react-testing-library?
like so (psuedo-code)
expect(fragment).toHaveTextContent(/hello world. how are you doing/)
First solution:
You can use #testing-library/jest-dom this library provides a set of custom jest matchers that you can use to extend jest and react-testing-library. Here is the link:
https://github.com/testing-library/jest-dom#tocontainelement
<span data-testid="ancestor"><span data-testid="descendant"></span></span>
const ancestor = getByTestId('ancestor')
const descendant = getByTestId('descendant')
const nonExistantElement = getByTestId('does-not-exist')
expect(ancestor).toContainElement(descendant)
expect(descendant).not.toContainElement(ancestor)
expect(ancestor).not.toContainElement(nonExistantElement)
Second solution:
import { render, within } from '#testing-library/react'
const { getByLabelText } = render(<MyComponent />)
const signinModal = getByLabelText('Sign In')
within(signinModal).getByPlaceholderText('Username')
Hello i want to put a style opacity:0.3 on img
<ion-content [style]="getBackgroundImg()">
getBackgroundImg() {
const img = this.mediaDetails.image_path;
const style = `background-image: url(${img}); `;
return this.sanitizer.bypassSecurityTrustStyle(style);
}
Note: i want put opacity only on const img not on the whole ion-content. It doesnt take the opacity in the object
You can add the opacity property in a style e.g.
const style = `background-image: url(${img}); opacity:0.3 `;
I have an element with class="objbox" but this attribute have multiple instances.
The current code that I use for scrolling is browser.executeScript('$(".objbox").scrollLeft(' + strPixels + ')'); but since there are multiple instances, it seems like it is getting the first instance and scroll was not successfully done to the target element.
I am wondering if it is possible to include the parent element on my code, or if there is a different work around.
<div class="dhxgrid2-wrapper">
<div class="dhtmlxgrid-container gridbox">
<div class="objbox">
...
</div>
</div>
</div>
It's possible.
What you need to do is the following
// Define the elementfinder of your parent, pick option A or B
const elementFinderWithParentA = $('.dhtmlxgrid-container .objbox');
// Or
const elementFinderWithParentB = $('.dhtmlxgrid-container').$('.objbox');
// The amount to scroll
const scrollLeft = 50;
browser.executeScript('arguments[0].scrollLeft = arguments[1];', elementFinderWithParentA, scrollLeft);
// Or making it more readable, make a function for the scrolling
// and pass it to the browser.executeScript
function scrollToLeft(element, scrollAmount) {
element.scrollLeft = scrollAmount;
}
browser.executeScript(scrollToLeft, elementFinderWithParentA, scrollLeft);
Hope it helps
We have HTML code that has elements which can be expanded or collapsed (depending on what they currently are). They can be expanded only one level. It looks sort of like this
<a href = "#" title = "Expand" id = ...>Row 1 </a>
<a href = "#" title = "Expand" id = ...>Row 2 </a>
<a href = "#" title = "Collapse" id = ...>Row 3 </a>
<a href = "#" id = ...>Subrow 3.1 </a>
<a href = "#" id = ...>Subrow 3.2 </a>
<a href = "#" title = "Expand" id = ...>Row 4 </a>
<a href = "#" title = "Collaps" id = ...>Row 5 </a>
<a href = "#" id = ...>Subrow 5.1 </a>
<a href = "#" id = ...>Subrow 5.2 </a>
There are many more, and it is a bit more complicated than this but you get the picture. Using page object I made a list
#FindBy(xpath = "//a[contains(#title, 'Expand') or contains(#title, 'Collapse')]")
private List<WebElement> expandCollapseElements
And then a method to expand them for instance:
public void expand() {
for (WebElement ele : expndCollapseElements) {
if (ele.getAttribute("title").equals("Expand")) {
ele.click();
}
}
}
In the actual code I also tried waiting until the title changed so I know it worked. Anyway, the problem is that once I expand an element, all the elements underneath apparently become stale. I know when you use #FindBy it refinds the element each time. But I am wondering when the element is refreshed. It seems like it is just done once at the beginning of the loop. Is that true? When is the element list refreshed? And is there a better way to do this? I tried making a new list containing the list and reversing it which kind of worked but not really. The matter is further complicated by the fact that these rows are displayed in its own scrollable div where you need to sacroll to see some of the elements. So any thoughts?
Suggestion: That's the difference between foreach and for.
Try to use "For loop" only.
I have some divs that are generated dynamically with content. I add the content id to the class for the div like so:
<div class="div-1"></div>
<div class="div-3"></div>
<div class="div-6"></div>
<div class="div-8"></div>
How do I select the id for a div because I need it as a param to send via ajax. e.g. I need to get the 1 when I click on the 1st div, 3 when I click on 2nd and so on
var id = $(this).attr('class').replace('div-', '');
Or even simple
var id = this.className.replace('div-', '');
Where this points to the dom element you click on inside the click handler.
//Here instead of document it is better to specify a parent container of all divs
$(document).on('click', '[class^="div-"]', function(){
var id = this.className.replace('div-', '');
});
Try this, and remember changing "div" for your selector:
$(document).on("click", "div", function() {
var class_elem = $(this).attr("class").split("-");
var n = class_elem[1]; // This is your number
});
The correct jQuery syntax is:
$("div").click( function() {
var id = $(this).attr('class').replace('div-', '');
});