Nightwatch - Meaning of WaitForElementVisible and WaitForElementPresent - nightwatch.js

Im using Nightwatch for e2e and Im finding these two command a little bit confusing given the name and explanation that comes with them.
.waitForElementVisible:
Waits a given time in milliseconds for an element to be visible in the page before performing any other commands or assertions.
What is the meaning of visible?
An element position in the footer, you need to scroll to see it, is it considered visible?
Does it mean visible in the DOM even if it is display:hidden, position:relative; left:20000px;, ...? Not actually visible for a user but dom is existing basically.
What is a modal view in on top of some content? Is it visible?
.waitForElementPresent:
Waits a given time in milliseconds for an element to be present in the page before performing any other commands or assertions.
What is the meaning of present?
Existing in the DOM without taking into account if it's visible or not?
Is there any relation/implication between these two command?
If an element return truth for .waitForElementVisible does it imply that .waitForElementPresent will return true?
A lot of questions but maybe an explanation about how they work would solve all of these small questions...
Sometimes Im just getting errors and Im thinking that it might be my bad understanding of these two commands.

What is problem with definition ? You already answer your question.
An element position in the footer, you need to scroll to see it, is it considered visible?
No,you dont need to scroll to check it visible or not.May be you do need with some command but not with these visible/present commands.
Does it mean visible in the DOM even if it is display:hidden, position:relative; left:20000px;, ...? Not actually visible for a user but dom is existing basically.
Yes,it exists(means present) in the DOM but for some reason it is not visible yet
(bad connection,attribute value,...).
If an element return truth for .waitForElementVisible does it imply
that .waitForElementPresent will return true?
yes it will, if an element is visible = > it is present.
For usage , you can check out my an example answer here,it might help .
Login timeout

Basically an element might be present (as in loaded in DOM) but not visible (e.g. out of view so you might need to scroll to see it, or it might be hidden).
If you want to perform an action like a click on an element then you want to be using 'visible'.

Related

Select elements based on layout in Cypress

I am looking for a solution that can work like the following code in Playwright.
page.click('input:right-of(:text("Username"))');
By using this command in Playwright, the input element on the right side of text Username will be clicked. I searched for a while but found that there seemed to be no handy equivalents in Cypress. Are there any approaches that can enable the possibility to select elements based on their positional relationships?
I think you can use
cy.contains('Username') // === :text("Username")
.next() // === :right-of(<previous subject>)
.click()
There may be subtle differences, like .contains() is a partial match and .next() is the next sibling in the DOM, not necessarily "right-of" by x coordinates.
You can add-in cypress-testing-library which has
cy.findByLabelText('Username').type('myname')
I haven't used it, but semantically seems to be what you are aiming for. Would be useful if relative positions change in mobile mode (e.g labels above).
A while back I implemented custom commands to assert relative positions of elements, as we were getting a lot of CSS regressions, but it's quite fiddly.

Appium: How to differentiate between two different iOS screens?

I am developing a testing algorithm for our iOS apps using Appium. To fully implement this algorithm i need to identify wither i have moved onto different screen or am still on the same screen after performing some action. I need to know, what makes every screen unique/different from other in terms of Appium?
Going through the pageSource of every screen, i found that most screens have xpath attribute in window element. Can i use value of xpath of window element to mark the screen as unique from others, or do i need to do a trivial string comparison between screen's pageSources to mark them different? Or is there any other better solution?
Not sure if xpath would be the best solution for this. Normally the UIAWindow would remain the same, and developers might use different containers within this UIAWindow to render different screens.
So to verify different screens, you might need to figure out what this container is and see if the container's properties change when you move to a new screen (ie a new container)
If you app user a different header for every new screen, then you can use this header to see if the screen is changed. Example: in WhatsApp, you would see a different persons at the top. So in this case, the person's name can be assumed as the header.
If this doesn't work then you can verify some of the other controls, or say list of all the UIAStaticText on the screen. During screen change the entire list of UIAStaticText might change. So this can indicate a screen change.
For our automation suite at work I've implemented a series of screen check steps. Every time we switch screens I do a find_element command for an element on that screen that is unique to that screen. That way if a button or option takes me to a new screen that is incorrect my test will fail as expected. If it does find the element we're expecting it adds minimal time to the test suite.
Anish Pillai made a good suggestion of using the header text if there is any. Otherwise a particular tab, menu text, resource_id, or whatever is unique about the page would suffice. All you would need to do is a find_element call and a failure message if it fails.

How do I change the visibility of multiple decorations in LabVIEW programatically?

I am trying to make a number of front panel decorations hidden in LabVIEW by the use of a boolean control. I have figured out how to do this with one object fine and have made it work with multiple items however it is not very elegant to say the least (see attached image). While in this case I only have 5 elements what if I had an elaborate front panel and had many more decorations I wanted to hide? There must be a better way to do this.
Thanks in advance.
Cheers
It works, just not very efficient....
As you might now you can use a for loop to iterate over array elements. What I would suggest is in the initialization code of your application put the controls of interest on to arrays, and when a user clicks a particular button iterate over those arrays to execute the visible non visible property node call on your decos and or controls of interest.

SlickGrid vertical scroll bar not displaying properly unless the filter is displayed/hidden to re-size the viewport

I'm just starting to use SlickGrid but I've had a lot of success creating a remote model that can interact with the paging plugin. The only problem I have seems to be a browser issue, but I'm curious if anyone knows a trick that may resolve the issue.
I'm retrieving the data page by page in my model via AJAX and updating the grid with the grid.setData() and grid.render() methods.
The problem I would like to solve is that when the length of data changes the vertical scroll bar gets really confused, unless I change the current visibility of the filter panel (grid.hideTopPanel() or grid.showTopPanel()). By confused I mean that the scroll handle in the scroll bar doesn't change size to indicate the different number of rows that are now current, and if the list grows, the scroll handle size jumps all over the place as I scroll up and down.
I'm assuming the "fix" works because it forces the browser to recalculate the view port height, but is there any way to force that to happen? Or is there a better way to do what I'm trying to do?
Ok mleibman straightened me out, what I actually was looking for was grid.updateRowCount(). I believe he will be adding a call to this in grid.setData(), but for now just make sure the 2 method calls are used together.
Have you tried grid.invalidate() ? Im my experience that forces the grid to recalculate pretty much everything. It may be more heavy-handed than you need but at least you can see if a complete invalidate solves the problem.
I figured it out. You need to call grid.resizeCanvas() after calling grid.setData(). It seems like this should be part of the grid.setData() method because a call to it will change the number of rows. But anyway, that's what you need to do.

Modifying a jQuery Plugin

I'm trying to modify Brian Reindel's Accessible News Slider plugin (sorry, it won't let me link to it and also to my work location), to allow a visitor to fill in multiple copies of a form, sliding back and forth between them. I need for the visitor to be able to add and delete copies of the form from the list. I've modified one of his examples and created a little function to add an element to the list. However, no matter how many times I call the function, it only adds one element, and the plugin is not aware of it; I can see it in the DOM Inspector, but that's it. What am I missing?
this is Brian. Since you're already using jQuery and the plugin, you would gain a great deal by using the library to append elements to the DOM within your custom function. I wanted to give you some guidance, since this is probably more work than you were inititally expecting. Here are some hopefully helpful tips:
The plugin calculates some wrapper
element widths based upon the number
of list items. If you add/remove list
items, then you would need to modify
the calculations that were made or
else it won't scroll properly. You'll probably experience the same types of issues for the click events on the next/previous buttons.
If you have events registered on
elements that you add/remove from the
DOM, then you will need to
re-register those events, since when
the elements are gone, so are the
events that were "bound" to them. It
doesn't look like this is your
problem though at this point.
If you're adding form elements to the
DOM on the fly using the "Add" link,
then the user's cursor focus is no
longer on the form elements, and the
slider is no longer really
accessible. As much as I love
plugging my own plugin, it was meant
mostly to demonstrate usable, custom styled accessible
JavaScript, and I'm not sure it is
flexible enough to do what you want
without some rework.
If you have more specific questions about how to do certain things to get you started on the right track, let me know, and I would be happy to help. Depending on how much you plan to use jQuery on your projects (and I highly recommend that you use it), try out the book Learning jQuery.

Resources