No tests found. Cypress could not detect tests in this file - testing

I am working with Cypress and the cucumber plugin. When I try to run Cypress I keep getting
No tests found.
Cypress could not detect tests in this file
I am referencing another question regarding this error, but it was going into a missing a spec file which is not the problem here. I've imported the correct step definitions as per docs but it's not pointing to that either.
For now here is my file structure.
cypress -
-integrations
-BDD
-ecommerce
-ecommerce.spec.js
- ecommerce.feature
In my cypress.json file
"testFiles": "**/*.js",
"baseUrl": "https://localhost:17843/GfmAdminConsole/",
"env":{
"url":"https://rahulshettyacademy.com"
},
"reporter": "mochawesome"
}
and here is the code I am trying to run
import {Given,When,Then,And} from 'cypress-cucumber-preprocessor/steps'
import HomePage from "./HomePage"
import ProductPage from "./ProductPage"
import CheckOutPg from "./CheckOutPg"
/// <reference types="Cypress" />
Given('I open ECommerce Page',()=>{
cy.visit("https://rahulshettyacademy.com/angularpractice/")
})
//When using hook to load data, use non-es6 syntax for a function.....might need to check if this was updated in later releases
When('I add items to Cart',function(){
const homePage = new HomePage()
const productPage = new ProductPage()
homePage.getShopTab().click()
testData.productName.forEach((product)=>{
cy.selectProduct(product)
})
productPage.getCheckoutBtn().click()
})
And('Validate the total price of the items selected',()=>{
let sum = 0
let total;
const checkOut = new CheckOutPg()
checkOut.getItemPrices().each(($el,index,$list)=>{
let price = $el.text().split(' ')[1].trim()
sum = Number(sum) + Number(price);
}).then(()=>{
cy.log(sum)
})
checkOut.getTotal().then((el)=> {
total = el.text().split(' ')[1].trim()
expect(Number(total)).to.eq(sum)
})
})
Then('Select the country submit and verify Thank you',()=>{
cy.get(':nth-child(6) > :nth-child(5) > .btn').click()
cy.get('#country').type('United States')
cy.wait(6000)
cy.get('.suggestions > ul > li > a').click()
cy.get('input[type="checkbox"]').check({force:true})
cy.get('.ng-untouched > .btn').click()
cy.get('.alert').then((el)=>{
const text = el.text()
expect(text.includes('Success')).to.be.true
})
})
EDIT:
ecommerce.feature file
Feature: End to end Ecommerce validation
application Regression test
#focus
Scenario: Ecommerce products delivery
Given I open ecommerce page
When I add items to cart
And Validate the total prices
Then select the country submit and verify Thankyou
Any guidance would be appreciated and thank you in advance.

Check your cypress.json according to https://github.com/TheBrainFamily/cypress-cucumber-preprocessor#cypress-configuration there should be
"testFiles": "**/*.feature"

No tests found.
Cypress could not detect tests in this file
I also got this error. I did 2 things to resolve it.
I added "testFiles": "**/*.feature" to my cypress.json file, just like #lojza mentioned in their answer. Thanks, #lojza!
I added a Scenario to my .feature file. Now my .feature file has this structure:
Feature: My awesome feature
Background: Background name: Login to my awesome site
Given I login to my awesome site
Scenario: Add cool stuff. Then logout.
Then I logout

Related

Cypress tests removing certain attributes from the page

Has anyone faced this with Cypress?
When I run my test using cypress, a particular test, keeps failing because hidden element is not showing up but when I run the same test manually, I can see the element with the hidden element showing up as soon as I enter value.
There is a field in our UI where if I pass invalid characters, then it should immediately show the hidden error element using aria, but this is not happening when running through cypress.
Desired behavior
When I run the same above test manually on the same field the result I am getting is this.
Cypress test Result:
Actual Result:
Code :
I think with <pvd-system-message> you have a shadow-root preventing access to the text inside you element.
Try
cy.get('#address-cityNameError')
.should('have.attr', 'message')
.shadow() // inside shadow-root
.should('contain', 'City contains invalid characters')
In case there are other tests with this problem, add includeShadowDom option to your config.
Ref Configuration options
cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:1234',
includeShadowDom: true
}
})

Testcafe - Selecting an element in Shadowroot is not working

I have this website https://www.storytel.com/sg/en/where I am trying to click on the button (refer to the image) in the Subscription Component which resides in the Shadowroot. I have tried with the following codes but it didn't work. It will be great if someone can help. Thanks in advance.
test('Click inside shadowDOM', async t => {
const shadowBtn = Selector(() => document.querySelector('storytel-subscription').shadowRoot.querySelectorAll('*[data-testid="subscription-card-0-button"]'));
await t
.click(shadowBtn);
});
There seems to be a bug with processing elements in shadow dom. I suggest you create an issue in the TestCafe GitHub repository and describe your scenario there: https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md

Cypress - run test in iframe

I'm trying to find elements in iframe but it doesn't work.
Is there anyone who have some system to run tests with Cypress in iframe? Some way to get in iframe and work in there.
It's a known issue mentioned here. You can create your own custom cypress command which mocks the iframe feature. Add following function to your cypress/support/commands.js
Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe, selector) => {
Cypress.log({
name: 'iframe',
consoleProps() {
return {
iframe: $iframe,
};
},
});
return new Cypress.Promise(resolve => {
resolve($iframe.contents().find(selector));
});
});
Then you can use it like this:
cy.get('#iframe-id')
.iframe('body #elementToFind')
.should('exist')
Also, because of CORS/same-origin policy reasons, you might have to set chromeWebSecurity to false in cypress.json (Setting chromeWebSecurity to false allows you to access cross-origin iframes that are embedded in your application and also navigate to any superdomain without cross-origin errors).
This is a workaround though, it worked for me locally but not during CI runs.
This works for me locally and via CI. Credit: Gleb Bahmutov iframes blog post
export const getIframeBody = (locator) => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get(locator)
.its('0.contentDocument.body').should('not.be.empty')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
spec file:
let iframeStripe = 'iframe[name="stripe_checkout_app"]'
getIframeBody(iframeStripe).find('button[type="submit"] .Button-content > span').should('have.text', `Buy me`)
that is correct. Cypress doesn't support Iframes. It is simple not possible at the moment. You can follow (and upvote) this ticket: https://github.com/cypress-io/cypress/issues/136

Vue CLI 3 Nightwatch page object configuration

I'm using Vue CLI 3 version 3.0.5.
In project configuration, I use Nightwatch as e2e test tool.
I try to use page objects, so I had nightwatch.config.js file in project root, and add page_objects_path inside like below:
{
page_objects_path : "/tests/e2e/page-objects"
}
Then I create page-objects folder as this path: /tests/e2e/page-objects.
Then I setup a page object Entry.js under that folder and try to use it in test:
/tests/e2e/page-objects/Entry.js
vmodule.exports = {
'Test Page Object': browser => {
browser
.url(process.env.VUE_DEV_SERVER_URL)
.waitForElementVisible('#app', 5000)
browser.page.Entry().sayHello()
browser.end()
}
}
And the error message shows:
Cannot read property 'Entry' of undefined .
It looks like my page object setup is not correct...
Could anyone help providing a correct implementation of NightWatch page object in Vue CLI v3.0.5 ? Thanks...
Ah, I know why it won't work.
Because nightwatch.config.js is a javascript file, I should export it first, then the plugin can read it.
module.export = {
page_objects_path : "/tests/e2e/page-objects"
}
Sorry for the dumb question.

How to remove Magento product details storage in browser?

In Magento 2 when we are opening multiple products it stores data of those products into window.localStorage.product_data_storage locally into the browser many of the browser that data get deleted automatically but in some of the browsers it is not getting deleted
I do have to say I opened about 200 products before this happened, but
it is never clear.
When we clear the cache of browser then it is removing that content of data from browser, but it is simply understood that the end user will not go to clear their cache every time so How we can remove this content from their browser?
Any Help will be appreciated
Thank You!
As of I understood that you wanted to remove the content from browser that Magento stores locally into every browser when you/anyone opens your site to use them at some places for example to maintain the component of knock-out js in magento like in checkout page, mini-cart, etc.
Here I have created a module to achieve this, with this module you can manage that how much content should be stored into the browsers local storage. Means the magento will store the content into local storage of browser but like if you want that data should be get deleted when the limit riches to 10-20 whatever the unit you wish Then the module will delete the content from the browser & magento will again start storing data to the local from 1 count to your desired limit.
Create a module at below location
Magento_root/app/code/{VendorName}/{ModuleName}
Create below files into it at the appropriate given location.
registration.php
etc/module.xml
view/frontend/layout/catalog_product_view.xml
view/frontend/templates/product/view/removelocal.phtml
view/frontend/web/js/removelocal.js
Here I am not putting the content of registration.php & module.xml assuming that it is already understood to you. For this answer I am taking the VendorName => Vendorname & the ModuelName => Removelocal. Here is the code of custom module.
catalog_product_view.xml
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="vendorname.removelocal.content" template="Vendorname_Removelocal::product/view/removelocal.phtml" before="-" />
</referenceContainer>
</body>
</page>
removelocal.phtml
<div class="swatch-opt" data-role="remov-local-content"></div>
<script type="text/x-magento-init">
{
"[data-role=remov-local-content]": {
"Vendorname_Removelocal/js/removelocal": {
}
}
}
</script>
removelocal.js
define([
'jquery'
], function ($){
'use strict';
$.widget('mage.removelocal', {
_init: function () {
if(window.localStorage.product_data_storage)
{
var temp = window.localStorage.product_data_storage;
var myObject = JSON.parse(window.localStorage.product_data_storage);
var count = Object.keys(myObject).length;
if(count >= 10){
window.localStorage.removeItem('product_data_storage');
}
}
}
});
return $.mage.removelocal;
});
Note: After completing please do run the below command.
php bin/magento module:enable Vendorname_Removelocal
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush