I am gonna to use Google App Script to fetch the programme list from the website of radio station.
How can I select the specified elements in the webpage by specifying the id of the element?
Therefore, I can get the programs in the webpage.
Edit, Dec 2013: Google has deprecated the old Xml service, replacing it with XmlService. The script in this answer has been updated to use the new service. The new service requires standard-compliant XML & HTML, while the old one was forgiving of such problems as missing close-tags.
Have a look at the Tutorial: Parsing an XML Document. (As of Dec 2013, this tutorial is still on line, although the Xml service is deprecated.) Starting with that foundation, you can take advantage of the XML parsing in Script Services to navigate the page. Here's a small script operating on your example:
function getProgrammeList() {
txt = '<html> <body> <div> <div> <div id="here">hello world!!</div> </div> </div> </html>'
// Put the receieved xml response into XMLdocument format
var doc = Xml.parse(txt,true);
Logger.log(doc.html.body.div.div.div.id +" = "
+doc.html.body.div.div.div.Text ); /// here = hello world!!
debugger; // Pause in debugger - examine content of doc
}
To get the real page, start with this:
var url = 'http://blah.blah/whatever?querystring=foobar';
var txt = UrlFetchApp.fetch(url).getContentText();
....
If you look at the documentation for getElements you'll see that there is support for retrieving specific tags, for example "div". That finds direct children of a specific element, it doesn't explore the entire XML document. You should be able to write a function that traverses the document examining the id of each div element until it finds your programme list.
var programmeList = findDivById(doc,"here");
Edit - I couldn't help myself...
Here's a utility function that will do just that.
/**
* Find a <div> tag with the given id.
* <pre>
* Example: getDivById( html, 'tagVal' ) will find
*
* <div id="tagVal">
* </pre>
*
* #param {Element|Document}
* element XML document or element to start search at.
* #param {String} id HTML <div> id to find.
*
* #return {XmlElement} First matching element (in doc order) or null.
*/
function getDivById( element, id ) {
// Call utility function to do the work.
return getElementByVal( element, 'div', 'id', id );
}
/**
* !Now updated for XmlService!
*
* Traverse the given Xml Document or Element looking for a match.
* Note: 'class' is stripped during parsing and cannot be used for
* searching, I don't know why.
* <pre>
* Example: getElementByVal( body, 'input', 'value', 'Go' ); will find
*
* <input type="submit" name="btn" value="Go" id="btn" class="submit buttonGradient" />
* </pre>
*
* #param {Element|Document}
* element XML document or element to start search at.
* #param {String} elementType XML element type, e.g. 'div' for <div>
* #param {String} attr Attribute or Property to compare.
* #param {String} val Search value to locate
*
* #return {Element} First matching element (in doc order) or null.
*/
function getElementByVal( element, elementType, attr, val ) {
// Get all descendants, in document order
var descendants = element.getDescendants();
for (var i =0; i < descendants.length; i++) {
var elem = descendants[i];
var type = elem.getType();
// We'll only examine ELEMENTs
if (type == XmlService.ContentTypes.ELEMENT) {
var element = elem.asElement();
var htmlTag = element.getName();
if (htmlTag === elementType) {
if (val === element.getAttribute(attr).getValue()) {
return element;
}
}
}
}
// No matches in document
return null;
}
Applying this to your example, we get this:
function getProgrammeList() {
txt = '<html> <body> <div> <div> <div id="here">hello world!!</div> </div> </div> </html>'
// Get the receieved xml response into an XML document
var doc = XmlService.parse(txt);
var found = getDivById(doc.getElement(),'here');
Logger.log(found.getAttribute(attr).getValue()
+ " = "
+ found.getValue()); /// here = hello world!!
}
Note: See this answer for a practical example of the use of these utilities.
Someone has made an example here where the following custom functions are available for cut & paste use:
getElementById()
getElementsByClassName()
getElementsByTagName()
Then you can do something like this
function doGet() {
var html = UrlFetchApp.fetch('http://en.wikipedia.org/wiki/Document_Object_Model').getContentText();
var doc = XmlService.parse(html);
var html = doc.getRootElement();
var menu = getElementsByClassName(html, 'menu-classname')[0];
return menu;
}
I'm going to assume that you are referring to using UrlFetchApp's fetch() method. In which case, the answer is no, in the context of what you are thinking of.
If you look at the return type for fetch() in the documentation it returns HTTPResponse. There are a few methods for that, but most of them involve getting the returned data as a string. The good news is, you could still use any (well, most) of the traditional JS String methods documented here - so you could use search(), match(), etc. Depending on your project you could use those to find the data you are looking for in the response.
Related
I am trying to get the list of project names from a table. Where by using locateAll() method I am able to get the list of elements but when I try to convert them into text value the result is null.
* def ProjectNames = locateAll("//div[#id='Projects']/#somePath")
* print ProjectNames
Above code displays
[DriverElement#aef32g2
DriverElement#ahf38g2
DriverElement#ayf12gj
DriverElement#ae032f2]
But expectation is to get result as below:
[Project1
Project2
Project3
Project4]
For which I tried - * print ProjectNames.text.trim() but this displays nothing and step is passed. Instead when I execute it for particular index value it displays the text for that * print ProjectNames[0].text.trim(). How can I do it for complete list received?
Thanks in advance!
Given the following HTML:
<body>
<div>first</div>
<div>second</div>
</body>
If you have an array of anything, you can map over the array to transform it. Note that I'm using the new JS engine in Karate 1.0 :)
* def temp = locateAll('div')
* def vals1 = temp.map(x => x.text)
* match vals1 == ['first', 'second']
And a second way to do what you need is scriptAll(), refer the docs: https://github.com/intuit/karate/tree/master/karate-core#scriptall
* def vals2 = scriptAll('div', '_.textContent')
* match vals2 == ['first', 'second']
HTML
<ion-input [(ngModel)]="login.username" ngControl="username1" type="number" #username1="ngForm" id="userName" required>
</ion-input>
PROTRACTOR TEST CODE
let usern: ElementFinder = element.all(by.css('.text-input')).get(0);
usern.sendKeys('error');
expect(usern.getAttribute("value")).toEqual("error");
browser.sleep(500);
usern.clear();
browser.sleep(1000);
usern.sendKeys('12345');
The element is found but no text is entered into the field. If I change the element to type="text" the protractor command works.And the page view is 'e' and can't be clear.
Secondly if I send string like this: "we2124will", the actually send data is '2124' and the result from getAttribute("value") is 2124.
Thirdly even if I changed the sendKeys to number, the result is not full number string. For example:
Failures:
1) Login page should input username and password
Message:
Expected '125' to equal '12345'.
Stack:
Error: Failed expectation
There are some number missing.
Since you're using an <ion-input>, the actual HTML <input> tag will be nested within, and it won't have an id attribute. The effect is that the wrong element can get selected.
Try something like below to grab the nested input tag:
let username = element(by.id('userName')).all(by.tagName('input')).first();
username.sendKeys('fakeUser');
That worked for me.
As a workaround, you can introduce a reusable function that would perform a slow type by adding delays between send every key.
First of all, add a custom sleep() browser action, put this to onPrepare():
protractor.ActionSequence.prototype.sleep = function (delay) {
var driver = this.driver_;
this.schedule_("sleep", function () { driver.sleep(delay); });
return this;
};
Then, create a reusable function:
function slowSendKeys(elm, text) {
var actions = browser.actions();
for (var i = 0, len = text.length; i < len; i++) {
actions = actions.sendKeys(str[i]).sleep(300);
}
return actions.perform();
}
Usage:
var elm = $("ion-input#userName");
slowSendKeys(elm, "12345");
What version of protractor are you using?
Not sure this is the issue but try grabbing the element by ng-model
var elem = element(by.model('login.username'));
elem.sendKeys('error');
expect(elem.getAttribute("value")).toEqual("error");
elem.clear();
elem.sendKeys('12345');
expect(elem.getAttribute("value")).toEqual("12345");
I currently have a data-sly-list that populates a JS array like this:
var infoWindowContent = [
<div data-sly-use.ed="Foo"
data-sly-list="${ed.allassets}"
data-sly-unwrap>
['<div class="info_content">' +
'<h3>${item.assettitle # context='unsafe'}</h3> ' +
'<p>${item.assettext # context='unsafe'} </p>' + '</div>'],
</div>
];
I need to add some logic into this array. If the assetFormat property is 'text/html' only then I want to print the <p> tag. If the assetFormat property is image/png then I want to print img tag.
I'm aiming for something like this. Is this possible to achieve?
var infoWindowContent = [
<div data-sly-use.ed="Foo"
data-sly-list="${ed.allassets}"
data-sly-unwrap>
['<div class="info_content">' +
'<h3>${item.assettitle # context='unsafe'}</h3> ' +
if (assetFormat == "image/png")
'<img src="${item.assetImgLink}</img>'
else if (assetFormat == "text/html")
'<p>${item.assettext # context='unsafe'}</p>'
+ '</div>'],
</div>
];
To answer your question quickly, yes you can have a condition (with data-sly-test) in your list as follows:
<div data-sly-list="${ed.allAssets}">
<h3>${item.assettitle # context='html'}</h3>
<img data-sly-test="${item.assetFormat == 'image/png'}" src="${item.assetImgLink}"/>
<p data-sly-test="${item.assetFormat == 'text/html'}">${item. assetText # context='html'}"</p>
</div>
But looking at what you're attempting to do, basically rendering that on the client-side rather than on the server, let me get a step back to find a better solution than using Sightly to generate JS code.
A few rules of thumb for writing good Sightly templates:
Try not to mix HTML, JS and CSS in the template: Sightly is on
purpose limited to HTML and therefore very poor to output JS or CSS.
The logic for generating a JS object should therefore be done in the
Use-API, by using some convenience APIs that are made fore that, like
JSONWriter.
Also avoid as much as possible any #context='unsafe', unless you filter that string somehow yourself. Each string that is not
escaped or filtered could be used in an XSS attack. This
is the case even if only AEM authors could have entered that string,
because they can be victim of an attack too. To be secure, a system
shouldn't hope for none of their users to get hacked. If you want to allow some HTML, use #context='html' instead.
A good way to pass information to JS is usually to use a data attribute.
<div class="info-window"
data-sly-use.foo="Foo"
data-content="${foo.jsonContent}"></div>
For the markup that was in your JS, I'd rather move that to the client-side JS, so that the corresponding Foo.java logic only builds the JSON content, without any markup inside.
package apps.MYSITE.components.MYCOMPONENT;
import com.adobe.cq.sightly.WCMUsePojo;
import org.apache.sling.commons.json.io.JSONStringer;
import com.adobe.granite.xss.XSSAPI;
public class Foo extends WCMUsePojo {
private JSONStringer content;
#Override
public void activate() throws Exception {
XSSAPI xssAPI = getSlingScriptHelper().getService(XSSAPI.class);
content = new JSONStringer();
content.array();
// Your code here to iterate over all assets
for (int i = 1; i <= 3; i++) {
content
.object()
.key("title")
// Your code here to get the title - notice the filterHTML that protects from harmful HTML
.value(xssAPI.filterHTML("title <span>" + i + "</span>"));
// Your code here to detect the media type
if ("text/html".equals("image/png")) {
content
.key("img")
// Your code here to get the asset URL - notice the getValidHref that protects from harmful URLs
.value(xssAPI.getValidHref("/content/dam/geometrixx/icons/diamond.png?i=" + i));
} else {
content
.key("text")
// Your code here to get the text - notice the filterHTML that protects from harmful HTML
.value(xssAPI.filterHTML("text <span>" + i + "</span>"));
}
content.endObject();
}
content.endArray();
}
public String getJsonContent() {
return content.toString();
}
}
A client-side JS located in a corresponding client library would then pick-up the data attribute and write the corresponding markup. Obviously, avoid inlining that JS into the HTML, or we'd be mixing again things that should be kept separated.
jQuery(function($) {
$('.info-window').each(function () {
var infoWindow = $(this);
var infoWindowHtml = '';
$.each(infoWindow.data('content'), function(i, content) {
infoWindowHtml += '<div class="info_content">';
infoWindowHtml += '<h3>' + content.title + '</h3>';
if (content.img) {
infoWindowHtml += '<img alt="' + content.img + '">';
}
if (content.text) {
infoWindowHtml += '<p>' + content.title + '</p>';
}
infoWindowHtml += '</div>';
});
infoWindow.html(infoWindowHtml);
});
});
That way, we moved the full logic of that info window to the client-side, and if it became more complex, we could use some client-side template system, like Handlebars. The server Java code needs to know nothing of the markup and simply outputs the required JSON data, and the Sightly template takes care of outputting the server-side rendered markup only.
Looking the at the example here, I would put this logic inside a JS USe-api to populate this Array.
I'm using Behat to test a registration page.
This page contains a few fields with autocompletion.
User fills in some value in the field, page waits 500 milliseconds, makes an ajax-request and displays some options along with a relevant message (no items found / several items found / one item found).
I'm using a predefined step "I fill in field with value" (tried to use "I fill in value for field" instead).
Next step is custom, similar to one described in documentation - I'm just waiting for message to appear and check that it has correct text.
But after filling the field Mink removes focus from it, causing blur event to be fired on the field.
Jquery-ui clears the field value in response to this blur event, so after 500 milliseconds field is empty and ajax request is aborted.
How can I fix this problem?
Behat v2.5.0
Mink v1.5.0
Mink-extension v1.3.3
Jquery-ui v1.8.21
Selenium v2.44.0
Solution below is specific to my markup code but should be easily adapted to yours. You might need to modify it.
Assuming that selecting auto suggested option in textbox. Autosuggestion options appear as <li> elements after user’s key strokes. <li> element presents in the page however its content is empty at the beginning so there is nothing to be selected by behat. To solve the problem, non existing content between <li> tags is wrapped with <label> tag.
User types in this auto suggestion field:
<input name="brand" type="text" />
Where autosuggestion data appears:
<ul>
<li><label>{{ suggestion }}</label></li>
</ul>
Gherkin:
When I fill in "brand" with "S"
And I wait 1 seconds
Then I select autosuggestion option "Sula"
And I wait 1 seconds
......
FeatureContext:
/**
* #Given /^I wait (\d+) seconds$/
*/
public function iWaitSeconds($seconds)
{
sleep($seconds);
}
/**
* #Then /^I select autosuggestion option "([^"]*)"$/
*
* #param $text Option to be selected from autosuggestion
* #throws \InvalidArgumentException
*/
public function selectAutosuggestionOption($text)
{
$session = $this->getSession();
$element = $session->getPage()->find(
'xpath',
$session->getSelectorsHandler()->selectorToXpath('xpath', '*//*[text()="'. $text .'"]')
);
if (null === $element) {
throw new \InvalidArgumentException(sprintf('Cannot find text: "%s"', $text));
}
$element->click();
}
#Scenario: I'm stuck
Given I use jquery-ui-autocomplete
And I can not test it with behat
Then I trigger keyDown event like this:
"""
/**
* #When I select :entry after filling :value in :field
*/
public function iFillInSelectInputWithAndSelect($entry, $value, $field)
{
$page = $this->getSession()->getPage();
$field = $this->fixStepArgument($field);
$value = $this->fixStepArgument($value);
$page->fillField($field, $value);
$element = $page->findField($field);
$this->getSession()->getDriver()->keyDown($element->getXpath(), '', null);
$this->getSession()->wait(500);
$chosenResults = $page->findAll('css', '.ui-autocomplete a');
foreach ($chosenResults as $result) {
if ($result->getText() == $entry) {
$result->click();
return;
}
}
throw new \Exception(sprintf('Value "%s" not found', $entry));
}
"""
Use this to Fill in the search box: (using the ID selector)
/**
* #Then I type :text into search box
*/
public function iTypeTextIntoSearchBox($text)
{
$element = $this->getSession()->getPage()->findById('searchInput');
$script = "$('#searchInput').keypress();";
$element->setValue($text);
$this->getSession()->evaluateScript($script);
}
In jQuery, there is a function to serialize a form element so for example I can submit it as an ajax request.
Let's say we have a form such as this:
<form id="form">
<select name="single">
<option>Single</option>
<option selected="selected">Single2</option>
</select>
<input type="checkbox" name="check" value="check1" id="ch1">
<input name="otherName" value="textValue" type="text">
</form>
If I do this with the help of jquery
var str = $( "form" ).serialize();
console.log(str);
the result would be
single=Single2&check=check1&otherName=textValue
Is there such functionality in dart's FormElement or I have to code it myself? Thanks.
I came up with my own simple solution that might not work in all cases (but for me it is workikng). The procedure is this:
First we need to extract all input or select element names and values from the form into Dart's Map, so the element name will be the key and value the value (e.g. {'single': 'Single2'}).
Then we will loop through this Map and manually create the resulting string.
The code might look something like this:
FormElement form = querySelector('#my-form'); // To select the form
Map data = {};
// Form elements to extract {name: value} from
final formElementSelectors = "select, input";
form.querySelectorAll(formElementSelectors).forEach((SelectElement el) {
data[el.name] = el.value;
});
var parameters = "";
for (var key in data.keys) {
if (parameters.isNotEmpty) {
parameters += "&";
}
parameters += '$key=${data[key]}';
}
Parameters should now contain all the {name: value} pairs from the specified form.
I haven't seen anything like that yet.
In this example Seth Ladd uses Polymers template to assign the form field values to a class which get's serialized.