Cypress making a duplicate of DOM element - testing

The Cypress for some reason produces a duplicate of an element, which makes it hard to make certain assertions.
We're working in the WordPress environment with our plugin and the flow of the test is:
Creating a page with our plugin
Adding an element (Post Grid in this case)
Changing some attributes
Saving the page
Viewing the page
E.g. A post grid is a usual div element which contains two items (links to blog posts) in it, but due to its being duplicate, the following assertion fails.
cy.get('.vce-posts-grid-list')
.find('.vce-posts-grid-item')
.its('length')
.should('be.eq', 2)
Our plugin utilizes an iframe and generates content (HTML) inside it.
Note: This issue occurs only sometimes, NOT 100% of the time.
Is it a Cypress specific issue or a reaction for WordPress and possibly our plugin environment?

Related

Cannot Access Elements (iframe) using the cypress suggested selector

I have a difficulties with some content of the web-page when I am trying to discover the element
For example some part of the web-page is blocked by the following:
[data-testid=shell-content]
Any idea what could possibly cause following?
In the browser, the page isn't blocked and (all buttons) can be accessed by the keyboard or mouse.
Tried to upgrade to the lates version, still the same problem.
The problem was described against the iframe, it has to be handled in a similar way in order to access the elements
cy.enter('iframe[data-testid="iframe-content"]').then((getBody) => {
getBody().find('[data-test-id="create-user-button"]').click();
please note that name shell-content could be different to what was name in your project.

Robotframework - Selenium - How to verify page loaded completely (successfully) without relying on a specific element in the page?

I was wondering if there is anything in Selenium that can verify if a page loaded completely without relying on a specific element in the page to appear (while using the "wait until page contains" or similar keywords).
The idea is reusability. If there is a need to add new websites to the robot automation later, I do not want to rely on a specific element that might exist in one page but not in another to verify if the page loaded fully.
Is there any keyword that addresses that in Robot Framework - Selenium Library?
Thanks!
Edit - I am aware that some AJAX requests are impossible or extremely difficult to conclude if they finished or not (or if they just keep going forever) so let's assume the website does not have any of that.
Once the page is finished loading, all requests are done.
driver.execute_script("return document.readyState === 'complete'")
use execute script document.readyState , if it returns complete it means the loading have finiished.
But if there is no ajax you don't have to do it selenium does it automatically so your question won't be valid:
https://www.selenium.dev/documentation/en/webdriver/page_loading_strategy/#:~:text=Defines%20the%20current%20session's%20page,loading%20takes%20lot%20of%20time.
normal This will make Selenium WebDriver to wait for the entire page
is loaded. When set to normal, Selenium WebDriver waits until the load
event fire is returned.
By default normal is set to browser if none is provided.
I couldn't find some built-in option but there is another way to achieve this. Check if your web app uses any third-party library which shows progress bar, if yes then probably there is function which returns the status of page loading including Ajax call. If not, then you can ask devs to add some progress bar, for instance Pace.JS
document.readyState does not wait for Ajax calls, personally I found it less helpful.

Selenium script fails on every step, exception "noSuchElementFound"

The Reason for this issues is the website page not loaded fully. Elements are visible and even clickable but loading message other fly messages doesn't allow to any action on the webpage. I already implemented all type of wait, still few steps keeps on failing. Is there any wait which check page is loaded or not? Using serenity framework.

Blocking some GTM tags when running TestCafe tests - use the dataLayer?

Wondering the best way to prevent a GTM tag from firing. I found https://rbardini.com/automating-gtm-data-layer-tests/ which tags about fetching the dataLayer variable and comparing it in an assertion, but this looks like a clumsy approach when you want to write to the dataLayer on every page.
For example, it suggests:
const getDataLayer = ClientFunction(() => window.dataLayer)
We use Google Tag Manager to automatically load tags on our website. Unfortunately one of them is CloudIQ (from PayPal) which pops up an iframe overlay offering a newsletter signup or ability to save your shopping basket. The Trigger in our GTM setup for that tag is simply 'All Pages'. When it pops up it generally blocks our test because Selectors cannot be clicked.
Our page flow is over several pages of an online shop, e.g.:
visit home page, click a product - navigates to a product page
click some options on the product page, then add to cart
go through checkout flow
So there might be many pages visited due to click actions.
There is an ability in GTM to define Variables and then use them in Exceptions for a tag, so I could prevent the CloudIQ tag firing either via a/ a global variable or b/ a dataLayer variable. However, I can't see how to elegantly get these set for each page visited during my test, such that they would exist when the GTM examines variables in order to block a Tag from being loaded. Fixture.beforeEach isn't right because it would only run once per fixture, and any data it set on the page's scope would be lost as soon as a page navigation occurs.
Anyone got experience of this sort of thing?
(The alternative of course is to detect the overlay, use switchToIframe to switch into the CloudIQ iframe and close it manually, but it pops up quite erratically and I'd prefer to simply disable the Tag altogether during tests as it's not core functionality of our website that we need to test.)
One way would be to set a custom user agent string to your test suite, create a custom javascript variable that returns the value for navigator.useragent, and make an exception trigger that blocks the tag.
Or any variation on that theme - set a cookie, use a url parameter, or if you test suite allow inject a global js variable, and check for the value in an exception trigger.
There is no need to avoid firing of events on the client side. Just mock the service routes for Google Tag Manager and CloudIQ and imitate correct responses for them.

Test cafe - Page Object - Consume Modules

I've been working mainly with selenium (java) and espresso as automation tools. I'm pretty new to test cafe and liking it so far.
I came across this specific situation and was wondering what would be the best way to solve it using javascript or test cafe.
I am using Page Object design on my suite. In addition, I would like those pages to be able to consume many modules that can also be consumed from many other pages.
As an example, let's say I have a Home page that has a Header and Footer modules and I also have a listing page that has a Header, a Footer, and a carousel that shows items (This carrousel also appears on other pages).
I was thinking of creating something like a generic page but not sure if it was the best solution. Any thoughts?
For generic items, create Page object class separately. For example in your case create page object for header/ footer, carousel area and place them in the generic package for better classification.
Invoke them where ever required (i.e. invoke header/ footer in homepage as well as in listing page).