Using Nightwatch.js page objects - node.js

I was wondering is there a way to use several page objects within one test without having to specify a url in each page object file.
All tests start on the login page launched using the launch_url parameter & navigate to several other URLS via button clicks
I want page objects to only contain element selectors.
I have tried using variable declarations such as
`var loginButton = loginPage.elements.login.selector`
but this is not really any advantage over declaring the selectors in a javascript file I can import at the start of the test

You can reference the elements from each page object without assigning them to variables. The syntax is a little different than you would expect. Here is how I do it in my tests.
Let's say I login to my app, land on a dashboard, and then navigate to an admin menu and verify some element is visible on that page. My test would look something like this (assume I've already setup my page object variables in a before hook):
'Test example 1': (browser) => {
loginPage.setValue('#usernameInput', username);
.setValue('#passwordInput', password)
.click('#loginBtn');
dashboardPage.waitForElementVisible('#mainMenu', 1000, () => {
dashboardPage.click('#mainMenu')
.click('#adminMenuOption');
adminMenuPage.verify.visible('#someElement');
}
}
Everywhere you see #elementName should match up with what you have named the element in your page object.

Related

how to access b2c sign in elements using javascript for UI customizing

i want to access b2c sign in page's h2, email and password elements to customize them.
using document.getElementsByClassName not giving any result
B2C injects it the html inside the predefined div with id api (<div id="api>). You can read more on this here. Now inorder to access the html elements injected by B2C inside the api div, you might have to check the structure of the html elements in the developer tools initially, and then try to select the specific element using javascript.
For eg: When B2C injects the html elements inside the api div, the section that contains the input tag for email looks like:
Now if you see, the input tag for email, doesn't contain any class there, rather if you check closely, you will find that each input element like for email or password is encapsulated under a parent div with class "entry-item". So in that case, the document.getElementByClassName would work on that level.
So to conclude, first identity the element you want to select using javascript using the dev tools on the browser, and then write the javascript accordingly.
In case the element you find doesn't contain any id or class, you can always use document.querySelector and select the tag to perform DOM manipulations.
Let me know if this works or if there are more queries around this.

How to obtain information of a field or variable on the Client side

I am using the Receipts page (IN301000) for reference purposes:
I would like to be able to obtain a field's information on the client side with the GetElementByID() method.
When I inspect the field, and identify the rendered ID, I obtain data:
However, if I refresh the page and invoke the method again, I obtain NULL:
Does anyone know how to make that information always available?
The final goal here is being able to pass data to the client side. I can - for instance -populate an unbounded field with the FieldSelecting event, and would like to ideally read data out of it.
If there are client variables that could be set from the graph, it would work as well.
Thanks!
You likely get null because the script is executed in the top iFrame instead of the main iFrame which contains the control.
The JavaScript global variable px_alls contains the editor controls and can be indexed by editor control ID.
px_alls["edTransferNbr"].getValue();
document.getElementById("ctl00_phF_form_t0_edTransferNbr_text").value;
Script executed in main iFrame context:
When the script is executed in the context of the top iFrame you would have to select the main iFrame.
var mainframe = document.querySelector('[name=main]').contentDocument;
mainFrame.getElementById('ctl00_phF_form_t0_edTransferNbr_text').value;
Script executed in top iFrame context:

#current_page feature in Geb

In WATIRwe use #current_page whenever we lands to page which got created at run time (during test case execution).
I am looking for similar feature in Geb.
Here I have two Pages
RegistrationPage.groovy
where I have provided
static url = "/register.html"
I also have UserProfilePage.groovy
here I can't provide any static url because it gets created once I submit the Registration Page, it changes as per user name
example https://xxxxx.com/paul.html, if two paul's are there then https://xxxxx.com/paul2.html
I want to use
static content = {
defaultprofilePic {$("#userprofilepic")}
}
declared in UserProfilePage.groovy
If I am not using to keyword it would land me back to baseURL and if I use it gives exception that element not available on this page.
But I think if I use could something like #current_page it would pass
You should use at(UserProfilePage) which sets the current page to be an instance of UserProfilePage and also verifies its at checker.

XPages Mobile Controls - sessionScope variable being lost

I am building a mobile app for iPhone using the mobile controls in the XPages Extension Library.
The first page displays a list of categories (happens to be a list of user names). When a category is selected the second page is displayed listing all documents belonging to the selected user.
The URL to open the second page includes a parameter with the user's name. The second page has a page heading control and on the "label" property I have added the following code:-
if (param.get("User") != null) {
sessionScope.put("UserName", param.get("User"));
}
return sessionScope.UserName;
I'm doing this so that I have access to the user name on subsequent pages, e.g. the third page is displayed when the user opens a document from the list on the second page.
When I test this in Chrome everything is fine. When I test in Safari I can see that the sessionScope variable is set when the second page is opened. However, when I select a document and the third page is opened the sessionScope variable is disappearing. I can't see any code that would explain this and when tested in Chrome the sessionScope variable is still there on page 3. Unsurprisingly I get the same issue when I test on an iPhone.
The problem this gives me is that, when navigating back from a document (p.3) to the list of documents for the selected user (p.2) I don't know which user was selected originally.
Anyone seen this before or have any explanation as to what might be going on?
Thanks for any suggestions.
you might want to refrain from the parameter approach unless you are sanetizing your input first, so instead of the URL write the userName directly into the scope - or even easier - bind the first field with the categories to the sessionScope. Did u try to modify your code to use a different variable name?

How can I get the dimensions of an image the user right-clicked on using Chrome's Extension API?

I'm writing an extension that reacts to right-clicks on images on the page. I'd like to know the image's dimensions to do further processing.
Out of the box, my callback gets a reference to the tab and an "info" object (OnClickData), which only exposes minimal information.
Has anyone hit this scenario before? I'm thinking of either
loading the image again based on the srcUrl (may not be reproducible if the URL is dynamic) and interrogating it
trying to walk the DOM of the tab to find the image and interrogate it (not sure if this would require a content script to cross the boundary from extension to webpage)
What the Image Properties Context Menu extension does is to use a user script in combination with the context menu API.
The user script is injected into all pages, listens for context menu events, and sends the information about the image to the extension via chrome.extension.sendRequest:
document.addEventListener("contextmenu", function (e) {
var elem = e.srcElement;
if (elem instanceof HTMLImageElement) {
var img = {
src: elem.src,
alt: elem.alt,
height: elem.height,
width: elem.width
}
chrome.extension.sendRequest(img);
}
}, true);
The background page uses chrome.extension.onRequest.addListener to receive this data, and stores it in a global variable. The context menu API click callback reads data from this global variable.
That assumes that the chrome.extension.sendRequest call is always handled before the click callback, which may not always be the case. You may want to make the callback check if the data has arrived, and if not, try again a little while later (by using setTimeout).

Resources