testCafe returning Success on timeout - testing

I have a page that is in break now, my backend is correcting it, but my test still returning success.
When I click to open the page, it is loading forever, doesn't open the page, and my "expect" was suppose to return an error, as it didn't find the "#btnStopService".
import 'testcafe';
import { Selector, ClientFunction } from 'testcafe';
fixture('Compass - Main page')
.page('http://localhost:3000/')
.beforeEach(async t => {
//login
t.ctx.username = 'admin';
t.ctx.password = 'admin';
await t.typeText(Selector('input').withAttribute('name','username'), t.ctx.username, {
paste: true,
replace: true,
});
await t.typeText(Selector('input').withAttribute('name','password'), t.ctx.password, {
paste: true,
replace: true,
});
await t.click(Selector('button').withAttribute('tabindex','0'));
})
.afterEach(async t => {
//logout
await t.click(Selector('#logoutBtn'));
});
test('Check if Services / Site Health page is loading... *** NOT WORKING ***', async t => {
await t.click(Selector('a').withExactText('Services'));
await t.click(Selector('a').withAttribute('href','#objectstore/sites/health'));
await t.expect(Selector('#btnStopService')).ok();
});
I am running it with:
testcafe edge .\test_spec.ts --selector-timeout 6000
The return I got is:
PS C:\ThinkOn\Compass_Test\Test1> testcafe edge .\test_spec.ts --selector-timeout 6000
Using locally installed version of TestCafe.
Running tests in:
- Microsoft Edge 17.17133 / Windows 10
Compass - Main page
√ Check if Services / Site Health page is loading... *** NOT WORKING ***
1 passed (23s)
PS C:\ThinkOn\Compass_Test\Test1>
Thanks all!!!

You need to add in an assertion option:
await t.expect(Selector('#btnStopService').exists).ok();

Related

Cypress auto submit on login page from beforeEach in second test

I'm working on a Cypress test for the Polish Wikipedia plugin, and I have this code in my cypress test:
Cypress.Commands.overwrite('visit', (orig, path, options) => {
return orig(`https://pl.wikipedia.org/${path}`);
});
Cypress.Commands.add('login', (pass) => {
cy.visit('/w/index.php?title=Specjalna:Zaloguj');
cy.get('#wpName1').type('<username>');
cy.get('#wpPassword1').type(pass);
cy.get('#userloginForm form').submit();
});
Cypress.Commands.add('dark_vector_wait', (pass) => {
cy.get('.vector-menu-content-list > li:nth-child(7)', { timeout: 10000 }).should('be.visible');
});
And in my spec:
describe('dark vector test', () => {
beforeEach('login', () => {
cy.login(Cypress.env('WIKI_PASSWORD'));
});
it('test discussion', () => {
cy.visit('/wiki/Dyskusja_wikipedysty:<username>');
cy.dark_vector_wait();
cy.matchImageSnapshot('discussion');
});
it('testing-page page', () => {
cy.visit('/wiki/Wikipedysta:<username>/testing-page');
cy.dark_vector_wait();
cy.matchImageSnapshot('testing-page');
});
});
And the second test is failing because as soon as Cypress type the password it automatically submits a form so cy.get('#userloginForm form').submit(); is executing after Cypress visits the home page (default redirect) and fail to find a form.
What's wrong? Why does Cypress auto-submit a form after a second time? This is not what Wikipedia is doing since the login form doesn't have any JavaScript code and you need to click login to be able to login to Wikipedia.
EDIT:
I've tried to
Use BaseURL and remove overwrite of visit.
Add type('{enter}'), but this only shows an error: cy.type() failed because this element is detached from the DOM.
EDIT 2
This is the screenshot of the action taken by cypress, second test has a page load without {enter} action and without form submit.
The problem is in Cypress.Commands.overwrite('visit').
You pass the parameter with a leading slash '/wiki/Dyskusja_wikipedysty:<username>' but concatinate to base which also has a trailing slash https://pl.wikipedia.org/${path}, so now the full path is
https://pl.wikipedia.org//wiki/Dyskusja_wikipedysty:<username>
If you set baseUrl in configuration, Cypress sorts it out for you
cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
baseUrl: 'https://pl.wikipedia.org'
}
})
Then remove the Cypress.Commands.overwrite('visit').
With these changes, I was able to pass both tests.
Using cy.session()
The problem might be one specific to locality, I do not have any steps missing in the Cypress log.
You can try adding a session cache so that the first login is re-used.
Cypress.Commands.add('login', (pass) => {
cy.session('login', () => { // login occurs only once
// credentials are cached
cy.visit('/w/index.php?title=Specjalna:Zaloguj');
cy.get('#wpName1').type('Jack Bosko');
cy.get('#wpPassword1').type(pass);
cy.get('#userloginForm form').submit();
// for good measure, confirm login was successful
// by checking for your name on the page
cy.contains('span', 'Jack Bosko')
})
})
So the problem was the weird IME keyboard that is part of MediaWiki. I somehow got it enabled on my system even when I was not logged in. Maybe added globally with cookies or something.
I noticed that keyboard when I was asking questions on the MediaWiki support page.
This is not related to Cypress. I'm investigating why the keyboard is there, and why clean environment it.

Cypress loads blank page on attempt to open test app url

On attempt to open simple app url in primitive Cypress (10.11) test (via Chrome browser) - blank page is loaded
cypress.config.js
const { defineConfig } = require("cypress");
module.exports = defineConfig({
chromeWebSecurity: false,
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
"viewportWidth":1980,
"viewportHeight":1020,
"screenshotsFolder": "mochawesome-report/assets",
"videosFolder": "mochawesome-report/assets",
baseUrl: 'http://power-inspiration-1088-dev-ed.scratch.my.site.com/ebikes',
},
});
login.cy.js
describe('Sales Force First Test', () => {
it('Open page', () => {
cy.visit('/')
})
})
On attempt to open the same url in non-automation-controlled Chrome content is loaded. Firefox browser works perfectly for that site with Cypress (i.e. page content is loaded and rendered properly)
For now, it works only in Firefox. Cypress team is working on this spike to resolve this issue - https://github.com/cypress-io/cypress/issues/24290

Playwright test works fine localy, but fails in pipeline

I am trying to run this code:
test('should login', async ({ page }) => {
await page.goto(localhost);
await page.fill('[name=username]', 'username');
await page.fill('[name=password]', 'password');
await page.click('[name=login]');
await page.waitForURL(`${localhost}/main`);
const currentUrl = await page.url();
expect(currentUrl).toBe(`${localhost}/main`);
});
When I run it with npx playwright test localy, the test passes; but, when run in CI/CD, it fails:
Timeout of 180000ms exceeded.
page.waitForURL: Navigation failed because page was closed!
=========================== logs ===========================
waiting for navigation to "http://localhost:3000/main" until "load"
============================================================
Any idea what causes this problem?
I would try logging all network requests to see what's going on there:
// Log and continue all network requests
page.route('**', (route, request) => {
console.log(request.url());
route.continue();
});
If it never gets beyond the goto(), perhaps try using the new playwright request fixture to see if it can even reach http://localhost:3000/main.
await page.request.get("http://localhost:3000/main", { ignoreHTTPSErrors: true });

How to wait for pages with long load time to load in testcafe?

From these docs:
https://devexpress.github.io/testcafe/documentation/test-api/actions/navigate.html
It looks like we can only wait 15 seconds for a page to load.
We develop a NextJS application and it's first load takes 40 seconds because it builds the app on the first load.
I can't seem to make TestCafe not timeout on the initial page load.
I tried
fixture('Restaurant List')
.page('http://localhost:3000/something')
.beforeEach(async () => {
await waitForReact(120000);
});
For example with no success.
You can send the first request that initiates the application building process and run your tests only when response will be received.
See a code example below:
const rp = require('request-promise');
const createTestCafe = require('testcafe');
rp('https://site-url')
.then(() => {
return createTestCafe('localhost', 1337, 1338);
})
.then(testcafe => {
runner = testcafe.createRunner();
return runner
.src('tests');
.browsers('chrome');
})
.catch(err => console.log(err));
You can try --page-load-timeout 40000
More info here:
https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#--page-load-timeout-ms
Or pause first test
https://devexpress.github.io/testcafe/documentation/test-api/pausing-the-test.html

Jasmine/Karma test: browser is not defined

If this test:
'use strict'
describe('application', function() {
it('should login', function() {
browser().navigateTo('/');
expect('111').toBe('111');
});
});
includes the "browser" line, the result is:
Chrome 26.0 (Windows) application should login FAILED
ReferenceError: browser is not defined
at null.<anonymous> (...../test/js/e2e/tests/test.js:6:9)
Chrome 26.0 (Windows): Executed 1 of 1 (1 FAILED) (0.359 secs / 0.004 secs)
but without this line the test succeeds.
People suggest to include angular-scenario.js, but this breaks tests
expect('111').toBe('222');
is evaluated as true.
What to do?
You need to have your app's server running along with the karma runner. So with Node.js:
node app.js
Also, make sure you change the urlRoot property in your karma config so it doesn't conflict with your app's and yes you need angular-scenario.js
files = [
ANGULAR_SCENARIO,
ANGULAR_SCENARIO_ADAPTER,
'test/**/*_spec.js'
];
urlRoot = '/__karma/';
proxies = {
'/' : 'http://localhost:3000/'
};
I've run into this problem too. I believe you can only call browser() inside of a beforeEach(); Try this:
'use strict'
describe('application', function() {
beforeEach(function(){
browser().navigateTo('/');
});
it('should login', function() {
expect('111').toBe('111');
});
});