The markup that it relates to (could be 1 line, could be 100)
A delimiter
I need to split the text by the delimiter. In JS terms, I would split by that delimiter string, then I would have an array. Then I'd loop through each array item and I would take the first line of that array item (my xpath target) followed by everything after that first line (the markup).
However, what I need to do with this data is:
press a button on a web page, copy that xpath value and enter it (insert by typing as pasting will not work) into a field
copy the associated markup, enter that into another field (also insert by typing).
Hit a save button
… and do that for each item found as a result of that split operation.
I know a lot of the macros/commands but I don't know the best way to approach the splitting into an array. I did find a third party command that split by a delimiter which provided an output as JSON or CSV, but I don't really need to create a file output.
Can someone tell me what are the building blocks I need to achieve this please? I'm comfortable with the workings of storing/retreiving variables, know how to target the relevant fields, insert text etc, it's really the process of splitting and handling the new array that results from it that I am stuck with.
To clarify, I could do this completely in JavaScript (see Codepen below for example). The thing that causes me the problem is that I cannot update field values by script run in the console and have to jump out of JavaScript inside of a loop to run a KM 'Insert text by typing' command.
So, if someone could tell me how I could adapt the script in the Code pen to work inside KM, I would REALLY appreciate it.
To save a round trip to CodePen, here is the script that works in plain JS:
const source="//html/body/div[1]/ul/li[4]\n<li>You can toggle the xpath type by pressing <kbd>x</kbd>, e.g. it would switch between:\n<ol>\n<li class=\"\"><var>//html/body/footer/ul/li[5]</var> and</li>\n<li class=\"\"><var>//*[@id=\"ul\"]/li[5]</var></li>\n</ol>\nIn other words, if there are IDs you can use them (but if the IDs look like junk, you can toggle it back).\n</li>\n💩💩Poop-delimiter💩💩\n//html/body/div[1]/ul/li[3]\n<li>Press the arrow keys to fine tune your selection (choose parent, child and sibling elements in the DOM) and confirm that selection with <kbd>Enter</kbd></li>\n💩💩Poop-delimiter💩💩\n//html/body/div[1]/p\n<p>Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Velit iste hic dolores obcaecati ut earum modi, quod.</p> \n<p>Quisquam ex vel provident repellat ad minima, aperiam expedita alias dolor, labore repellendus itaque enim, necessitatibus.</p> \n<p>Laboriosam odit necessitatibus, atque id sapiente recusandae pariatur nobis quaerat fuga aliquid ipsam doloremque rerum ipsa.</p> \n<p>Cupiditate laudantium pariatur quidem nisi, distinctio at soluta expedita saepe, consequuntur id velit sunt totam.</p> \n<p>Alias laudantium dignissimos labore voluptates sed asperiores facilis adipisci ut voluptatibus? Pariatur error culpa.</p> \n💩💩Poop-delimiter💩💩\n//*[@id=\"mainheader\"]\n<header id=\"mainheader\">This is a header</header>\n💩💩Poop-delimiter💩💩\n";
/*
Source with line breaks is:
//html/body/div[1]/ul/li[4]
<li>You can toggle the xpath type by pressing <kbd>x</kbd>, e.g. it would switch between:
<ol>
<li class=""><var>//html/body/footer/ul/li[5]</var> and</li>
<li class=""><var>//*[@id="ul"]/li[5]</var></li>
</ol>
In other words, if there are IDs you can use them (but if the IDs look like junk, you can toggle it back).
</li>
💩💩Poop-delimiter💩💩
//html/body/div[1]/ul/li[3]
<li>Press the arrow keys to fine tune your selection (choose parent, child and sibling elements in the DOM) and confirm that selection with <kbd>Enter</kbd></li>
💩💩Poop-delimiter💩💩
//html/body/div[1]/p
<p>Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Velit iste hic dolores obcaecati ut earum modi, quod.</p>
<p>Quisquam ex vel provident repellat ad minima, aperiam expedita alias dolor, labore repellendus itaque enim, necessitatibus.</p>
<p>Laboriosam odit necessitatibus, atque id sapiente recusandae pariatur nobis quaerat fuga aliquid ipsam doloremque rerum ipsa.</p>
<p>Cupiditate laudantium pariatur quidem nisi, distinctio at soluta expedita saepe, consequuntur id velit sunt totam.</p>
<p>Alias laudantium dignissimos labore voluptates sed asperiores facilis adipisci ut voluptatibus? Pariatur error culpa.</p>
💩💩Poop-delimiter💩💩
//*[@id="mainheader"]
<header id="mainheader">This is a header</header>
💩💩Poop-delimiter💩💩
*/
const sourceArray = source.split("💩💩Poop-delimiter💩💩");
//get fieldNames
const txtXpath = document.querySelector("#txtXpath");
const txtMarkup = document.querySelector("#txtMarkup");
const btnSave = document.querySelector("#btnSave");
Array.from(sourceArray).forEach(targetAndSourceMarkup => {
const targetAndSourceMarkupArray = targetAndSourceMarkup.split("\n");
const xpath = targetAndSourceMarkupArray[1];
const markup = targetAndSourceMarkup.replace(xpath+"\n","");
if (targetAndSourceMarkup.trim()!=="") {
console.log("xpath = ",xpath);
console.log("markup = ",markup);
console.log("👆");
//update fields with found values (in reality this will be done with a KM 'Insert text by typing' followed by a click on a save button which could e done either by a KM action or via JS)
if (txtXpath&&txtMarkup&&btnSave) {
txtXpath.value = xpath;
txtMarkup.value = markup;
btnSave.click();
}
}
});
So the output from that should be a series of values consisting of:
A 1-line xpath reference
A multi-line markup sample (no way of knowing how many lines that may be).
To simplify things, I need to split a text file by a delimiter (and let's not worry about what's inside that array resulting from the split) and then while looping through the array, I need to trigger one or more km actions that need to use sone of that data.
So, if I had a file that was:
1
^~^
2
^~^
3
^~^
4
^~^
And I split using '^~^'
I want to then loop through and trigger a km click event on a web page (which I could target using JS run in the console or maybe use a found image) and paste the value ('1'), then click another button. And repeat for each value in that array ('2', '3' etc).
