I have an artillery test which I'd like to have check a title on a page to ensure that it is correct. I'm able to capture the element nicely using
capture:
- selector: "#BodyContent_lblWelcome"
as: title
This element is a span and I'd like to check what text is in that span. I've tried various combinations of attr such as text, value, innerHTML and I've tried logging properties off the capture like so
- log: "{{title}}"
- log: "{{title.value}}"
The first log here prints something like [Object: null prototype] { id: 'BodyContent_lblWelcome' } but the second prints nothing. How can I get at the content of the node without resorting to a regex or xpath match?
It seems you can't currently as it only works with attributes, from the code:
function extractCheerio(doc, expr, opts) {
let $ = cheerio.load(doc);
let els = $(expr);
let i = 0;
//snip...
return els.slice(i, i + 1).attr(opts.attr);
}
Related
I noticed that some social networks (such as Instagram, Twitter) highlight words with hashtags or # in blue and a list of tags or people comes up. I was wondering how I can replicate a similar effect in Angular.
By analyzing the page, I saw that everytime a new hastag is written, a new < span > tag is generated with the hashtag text inside, but I still can't understand how to implement this.
Even an idea on how to make it would be appreciated.
You can use a dropdown from bootstrap or material and fill it with a *ngFor with an array of filtered items from an array of possible tags.
You can even have a regex for the filtered tags to match anything you want, here is an example:
public search: string = ''; // You will change this with some input.
getTags(): string[] {
let searchRegex = new RegExp(this.search, 'gi');
return this.options.filter((o: string) => {
return o.match(searchRegex);
});
}
And the only thing you have to do in your html is to put your getTags() in your *ngFor() like this and check if the user has been started writing in your search input.
<ng-container *ngIf="search !== ''">
<span *ngFor="let tag of getTags()">
{{tag}}
</span>
</ng-container>
You can even get more of this by changing the input to start changing the search variable and get a message variable that will be checked for special characters to start filling the search with something like this:
public message: string = ''; // This will have the actual message.
public search: string = ''; // This will be the real variable that will get the
tags.
checkForSearchInMessage(){
if(this.message.includes('#')){ // The # character could be anything.
this.search = this.message.split('#')[1];
}
}
I'm using the monaco editor for validating JSON in accordance with a custom schema, such as is described in this Playground example.
Next, I'd like to customize a hover event whose behavior depends on which part of the schema is being hovered over. I can easily add a hover event that knows what word I'm hovering over, by just adding some code like this:
monaco.languages.registerHoverProvider('json', {
provideHover: function(model, position) {
// get the word that the cursor is currently hovering over
var word = model.getWordAtPosition(position);
var wordRange = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
return {
contents: [{ value: 'This word is: ' + word.word }],
range: wordRange
};
}
});
But what I also need to know is the schema path-- something like this, but with a properly functioning getSchemaPart():
function getSchemaPart(model, position) {
return ['http://myserver/bar-schema.json#', 'p1'].join('/'); // How do I do this properly?
}
monaco.languages.registerHoverProvider('json', {
provideHover: function(model, position) {
// get the word that the cursor is currently hovering over
var word = model.getWordAtPosition(position);
var wordRange = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
var schemaPart = getSchemaPart(model, position);
return {
contents: [{ value: 'This word is: ' + word.word + ' and its schema part is ' + schemaPart }],
range: wordRange
};
}
});
Clearly, Monaco already knows this information since it's needed for validation. Is there any way to fetch it in my hover event?
Alternatively, is there a clean way to use some other library and feed it the entire JSON value, and then figure out what schema part applies to the particular position that is being hovered over? This latter approach seems feasible in theory but challenging when considering that there may be whitespace in the input which the parser ignores, and therefore it requires mapping positions to tokens to schema parts.
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 need to extract parts of string from the text which was written in the field (input) on UI (This text is not in HTML code).
I am trying sth like this (but it does not work).
const textInput = await model.inputtTittle.textContent;
console.log(textInput)
Nothing return probably textContent take text from the selector, I was trying with .innerText but it also returned nothing.
And then I would like to write sth like this:
if (textInput.length > 32)
await t.typeText(model.inputTittle, textInput.substr(0, 30));
I hope that it will be work if I have the content of the field inputTittle.
Additional question:
This answer is hidden. This answer was deleted via review 16 hours ago by Jason Aller, Mark Rotteveel, Nico Haase, Botje.
This code works:
const textTittle = await model.inputTittle.value;
const textlength = textTittle.length
if (textlength>32)
{
console.log(textTittle.substr(0,30));
}
why i can not to writte shorter:
if (await model.inputTittle.value.length >32)
{ console.log(await model.inputTittle.value.substr(0,30));}
You can obtain the entire DOM Node Snapshot with all properties in one object to check what properties you need. It is likely you need the value property.
I have a number of links in a page that look like so :
<a class="plant_detail_link" href="plants/O7-01111"><h3>O7-01111</h3></a>
I can select all these link in my page with the following xpath :
//a[#class='plant_detail_link']
I can extract attributes like the class of each link in the usual manner :
//a[#class='plant_detail_link']/#class
But when I attempt to use the same technique to extract the href attribute values I get an empty list :
//a[#class='plant_detail_link']/#href
Does anyone have any ideas why this may be the case?
image detailing chrome developer console xpath execution
EDIT:
See full page html here - http://pastebin.com/MAjTt86V
it's a chrome bug, I believe. You can add the [index].value to get the result. In other words, the $x for href did work but it doesn't return the result in the output for some reason.
For example, I ran these $x queries in the console on this page for the 'Questions' button and got the following output:
$x("//a[#id='nav-questions']/#href")
> []
$x("//a[#id='nav-questions']/#href")[0].value
> "/questions"
You can use something like this to get a usable array of values:
var links = $x("//a[#target='_blank']/#href");
var linkArr = [];
for (i in links) { linkArr.push(links[i].value)}
or to put it in a function:
function getHref(selector, value, $x) {
var links = $x("//a[#"+selector+"='"+value+"']/#href");
var linkArr = [];
for (i in links) { linkArr.push(links[i].value)};
return linkArr; }
getHref("target","_blank", $x);
EDIT
Not sure if this will help you but in chrome adding a comma like this returns the output without the [index].value:
$x,("//a[#id='nav-questions']/#href")
> "//a[#id='nav-questions']/#href"
you could try adding a comma to the xpath selector but I'm not sure if it will help in your case.