I'm trying to extract the content of data-id.
For example :
<div data-id= "43434"></div>
How can I get the value of 43434? I want to get access to the content of data.
As I see you want to get this value inside a TestCafe test.
If so you can use the Selector.getAttribute() method.
const element = Selector('your-div-selector');
const attrValue = await element.getAttribute('data-id');
// or if you need to use it in an assertion
await t.expect(element.getAttribute('data-id')).eql('43434');
Get the element using has attribute selector and get the value from dataset property or get attribute value using Element#getAttribte method.
console.log(
document.querySelector('div[data-id]').dataset.id
)
<div data-id="43434"></div>
Related
I have a div that is contenteditable and grabbing the div using useRef(), which is a reactjs hook.
When I try to display the text inside the contenteditable div, the alert shows nothing but the log shows the text.
Is there something I am missing?
this is just a snippet I created
export default function Input() {
const inputRef = useRef();
const showText = () => {
console.log("text: ", inputRef.current.innerText);
alert("text: ", inputRef.current.innerText);
}
return (
<>
<div ref={inputRef} contentEditable="true" supressContentEditableWarning={true} />
<button onClick={showText}>Show text</button>
</>
)
}
It also does't work when I use it as a value inside an object eg.
const obj = {
text: inputRef.current.innerText
}
I will be thankful if someone can help me understand what is going on here!!
UPDATE
just don't use alert to debug lol.
Is there anything stopping you from getting the innerText using DOM like this-
var innerText = document.getElementById('elementName').innerText
then passing the value to your reactJS?
window.alert only takes a single parameter, so only the first string is shown. If you pass in too many arguments to a javascript function, the extra parameters will simply be ignored. This is different from console.log, which is a variadic function, meaning it will take any number of parameters and display all of them.
Try alert("text: " + inputRef.current.innerText) instead.
I am trying to change the attribute value of an element but the new value is not set in the element
Any Best standard practise of Angular through which we can achieve the below problem
<div name="hai" (click)=test($event) #ckechName>
in Ts file
test(event){
let exmpl=event.currentTarget
exmpl.getAttribute('name') //I am able to retrieve this valu as hai
exmp.setAttribute('name','hello') //This is value is not setting as hello in the dom..It is still showing hai
}
Try with this solution
#ViewChild('ckechName', {static: true}) myCkechName:ElementRef;
And in your function test you can do like
this.myCkechName.nativeElement.value = 'hello';
You dont need to pass $event in test function
Hope useful
I have an ajax 'POST' method that sends the id input to a php file. For some reason whenever I write input.value method, it returns undefined:
input = document.getElementsByClassName("Input");
const id = input.value;
alert(id);
What am I doing wrong?
Edit: I tried making the element as a separate id instead of a class and the problem disappeared.
getElementsByClassName() returns an array-like collection of elements, not a single element.
You'll need to extract one of the elements from the collection, e.g.
input = document.getElementsByClassName("Input");
const id = input[0].value; //<--
alert(id);
Better would be to target the exact element in some way e.g.
document.querySelector('#theActualElement'); //<-- returns single element
Currently I have the following HTML:
I'm needing to get the data-src link that is there. My code in puppeteer js is:
await page.waitForSelector('#ldpPhotoGallery');
const getImgSrc = await page.$$eval('#ldpPhotoGallery', imgs => imgs.map(img => {img.getAttribute('data-src')}));
console.log(getImgSrc);
Here I wait for the page id then after it's loaded it should run the page evaluation. I'm not sure if I'm doing this correctly. From what I understand I'm evaluation the id ldpPhotoGallery then from there it returns the contents. From there I'm searchinging getAttribute data-src and it should return it no? The console.log is [null]. I know the data is there. What am I doing wrong?
It seems you just have a typo in the arrow function format: .map(img => {img.getAttribute('data-src')}) would fill all the array with undefined, as an arrow functiond body in curly brackets without retutn implicitly returns undefined. Then undefined is serialized as null and you get [null]. Just remove curly brackets or add explicit retutn.
BTW, you need not page.$$eval() for id selector, it returns an array with just one element. page.$eval() may suffice:
await page.waitForSelector('#ldpPhotoGallery');
const getImgSrc = await page.$eval('#ldpPhotoGallery', img => img.getAttribute('data-src'));
console.log(getImgSrc);
I have a typical page containing sections of label/field pairs but with the same label name in different sections. The sections have are named so I can identify them using the name. The HTML is structured so that the section name is a sibling of another element containing the label/fields
<div class="section">Business Address<\div>
<div>
<div class="field">
<div class="label">Country<\div>
<input type="text">
....
If I could identify the label element using a selector only I can do something like: -
const siblingHandle = page.evaluateHandle(() => {
const sectionLabelHandle = Array.from(document.querySelectorAll('.blah')).find(el=>el.textContent.includes('section label name'))
return sectionLabelHandle.nextElementSibling
})
const label = await siblingHandle.$('label selector')
But what I need is a handle on the label element so that I can get its sibling field so I can type a value in it.
I can't use siblingHandle.$eval() as it doesn't return a handle.
I've also considered using page.waitForFunction, passing in the handle so that can be used instead of 'document'
const labelHandle = page.waitForFunction(
handle => Array.from(handle.querySelectorAll('sel')).find(el=>el.textContent.includes('text'),
{},
siblingHandle
)
but I get a cycling JSON error if I do that.
So, a couple of questions,
1) Is there any way to get siblings in Puppeteer without having to use nextElementSibling in an evaluate function?
2) How can I search for an element containing specified text, but in the context of a parent handle rather than document?
Xpath selectors as opposed to CSS selectors can answer both of your questions.
Search for an element via specified text:
const xpathWithText = '//div[text()="Country"]';
Using it to get the next sibling:
const xPathTextToSibling = '//div[text()="Country"]/following-sibling::input';
In practice:
const myInput = await page.waitForXPath(xPathTextToSibling);
await myInput.type('Text to type');
You should not need to search for an element with specific text in the context of a parent handle because the second selector I used above will give you a handle of the element you want to type in directly.