Hash-based navigation with puppeteer - mocha.js

I am trying to navigate to the url which contains # in the url which is returning Error: Navigation Timeout Exceeded: 30000ms exceeded
it('should go to new link', async function(){
await page.goto('https://example.com/#/abc', {waitUntil: 'networkidle2'})
await page.waitForNavigation()
await page.waitFor(15000);
})
Original code expects a path to a tag having value as #/abc
await page.waitForSelector('a tag selector')
await page.click('a tag selector')
await page.waitForNavigation()
await page.waitFor(5000);
await page.screenshot({ path: 'abc.png' })
Running the test file with command mocha --timeout 75000
package.json
"devDependencies": {
"chai": "^4.1.2",
"karma": "^2.0.3",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-requirejs": "^1.1.0",
"mocha": "^5.2.0"
},
"dependencies": {
"puppeteer": "^0.12.0",
"requirejs": "^2.3.5"
}
Updated the code to
await page.goto('https://example.com/#/abc', {waitUntil: 'load'})
await page.waitForSelector('selector on desired page');
await page.waitFor(5000);
await page.screenshot({ path: 'abc.png' })
and added headless: false, I can see it does go to the page wait for some amount of time but still throw the error Error: Navigation Timeout Exceeded: 30000ms exceeded

goto automatically waits for navigation. Your waitForNavigation is expecting it to make another navigation request. You also don't need to wait for 25 seconds to make this right.
However for such ajax site, IMO, you should wait for some selector that loads only when the page is completely loaded.
You can also pass a timeout parameter to increase the timeout and see if that works.
The following is good enough.
it('should go to new link', async function(){
await page.goto('https://example.com/#/abc', {waitUntil: 'networkidle2', timeout: 60000 })
await page.waitFor('#SomeSelectorThatWeWaitFor')
})
The best way to debug this is to see the behaviour of target page carefully.

Related

Cypress and Laravel - cy.refreshDatabase() results in a timeout

I am adding Cypress to a large monorepo. I am using:
"laracasts/cypress": "^3.0", and
"cypress": "^12.0.1",
I have followed the installation instructions in the laracasts cypress package found here:
https://github.com/laracasts/cypress
I have replaced the generated example.cy.js file with:
describe('Example Test', () => {
before(() => {
cy.refreshDatabase();
})
... some other bits that aren't hit
});
I have database called cypress_testing set in my cypress env file.
When I run this file, it hangs before returning:
cy.request() timed out waiting 30000ms for a response from your server.
The request we sent was:
Method: POST
URL: http://localhost:3000/cypress/artisan
No response was received within the timeout.
There are no laravel logs, no console logs - just this timeout error. In cypress config file, I have:
const threeMinutesInMiliseconds = 180000;
module.exports = defineConfig({
chromeWebSecurity: false,
retries: 2,
defaultCommandTimeout: threeMinutesInMiliseconds,
responsetimeout: threeMinutesInMiliseconds,
requestTimeout: threeMinutesInMiliseconds,
Has anyone else encountered this while working with Laravel/Vue and Cypress?

Testcafe doesn't wait text to be rendered

+ expected - actual
-sign.up
+Sign up now
Im having this issue while asserting a text. It works if I add a wait delay before. Even though Im using visibilityCheck:true on this selector, it won't wait.
Is there something I can do to avoid manually adding waits?
test("Loads the app in english by default", async (t) => {
await t.wait(20000);
const signupText = await signUpPage.signupLink.with({
visibilityCheck: true,
})();
await t.expect(signupText.textContent).eql("Sign up now ");
});
You can use assertion timeout:
await t.expect(Selector('h1').innerText).eql('text', 'check element text', { timeout: timeoutValue });

Playwright delay, hang, never resolve response with route (add latency)

I need to test service when response is delayed or is never resolved. Done brute force implementation:
await page.route(url, () => page.waitForTimeout(1000));
As docs says: page.waitForTimeout() should only be used for debugging link
But how to i.e. make page request for url, and wait till page receives timeout.
Another scenario:
Page requesting data i.e. api/items
I need to check page state before api/items request is resolved
Dummy test example:
import { test, expect } from '#playwright/test';
test('banner shows in progress message', async ({ page }) => {
await page.route('**/async-resource.json', () => {
// this request should not be resolved before tests ends
page.waitForTimeout(1000);
});
await page.goto('https://async.page/');
const banner = page.getByRole('banner');
await expect(banner).toHaveText('Your data are being prepared!');
});

How to debug "Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL"?

I have a test that passes locally but it fail during Gitlab CI pipeline due to timeout error.
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
Which way can I go through to debug this? I tried to increase defaultTimeoutInterval to 240000 in protractor configuratoin file, but nothing has changed.
Test
describe('Test', () => {
beforeAll(async () => {
console.log('1) start beforeAll');
await api_wrapper.generateAllLatestMeasureToPatient(patient); // it breaks here
console.log('2) API calls completed'); // it never gets here
await page.navigateTo();
console.log('3) end beforeAll');
});
it('should display map, edit fence button and toggle fence button', async () => {
console.log('4) start test');
// ...
});
});
In generateAllLatestMeasureToPatient() I do ten HTTP POST requests to API endpoint. In CI it stops at fourth, locally works fine.
Console output
1) start beforeAll
4) start test
I use 2 types of timeouts :
defaultTimeoutInterval: 120000,
also in
exports.config = {
allScriptsTimeout: 90000,
}
my test also used to timeout more in CI environment I started running them in headless mode with Browser window-size set and it really helped.
capabilities: {
'browserName': 'chrome'
},
'chromeOptions': {
'args': ["--headless", "--disable-gpu", "--window-size=1920,1080"]
},
}

Unhandled promise rejection beforeAll in e2e test with async await

I have been searching a solution for this warning for weeks, I looked a hundered github or stackoverflow topics but solutions gave me peace never or temporary. So I opened about this topic pls don't get mad at me I'm stuck.
I am writing e2e test with async await in AngularJs.
I canceled control flow with: SELENIUM_PROMISE_MANAGER: false
this is my login.Spec test file for testing login page:
var LoginPage = require('../pages/login.page.js');
describe('Testing Login Page', function (){
const EC = protractor.ExpectedConditions;
var loginPage = new LoginPage();
beforeAll(async () => {
await loginPage.get().catch((e)=>{
console.log(e);
})
await loginPage.login().catch((e)=>{
console.log(e);
})
});
it('there should be user name and user password area',async () => {
expect(await $('[ng-model="user.name"]').isPresent()).toBe(true);
expect(await $('[ng-model="user.password"]').isPresent()).toBe(true);
});
it('there should be login button',async () => {
expect(await $('[test-id="loginSubmit"]').isPresent()).toBe(true);
});
});
this is my login.page.js for get and login functions:
let LoginPage = function(){
const EC = protractor.ExpectedConditions;
this.get = async ()=>{
await browser.get(`${browser.baseUrl}`);
await browser.wait(
EC.presenceOf(element(by.css('.container.login'))), 30000,
'Waiting too long to open login page'
)
}
this.login=async ()=>{
await $('[ng-model="user.name"]').clear().sendKeys(browser.params.login.user);
await $('[ng-model="user.password"]').clear().sendKeys(browser.params.login.password);
const loginSubmit = await $('[test-id="loginSubmit"]');
await loginSubmit.click();
}
}
module.exports = LoginPage;
this is my export config part in protractor.config.js:
framework: 'jasmine',
specs: ['../test/e2e/specs/*Spec.js'],
SELENIUM_PROMISE_MANAGER: false,
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 900000 //for timeout error: timed out after 30000 msec waiting for spec to complete
},
getPageTimeout: 900000, //for Error: Timed out waiting for page to load after 10000ms
//for Error: Angular could not be found on the page: retries looking for angular exceeded
allScriptsTimeout: 900000, //for Error: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds.
//for ScriptTimeoutError: asynchronous script timeout: result was not received in 11 seconds
multiCapabilities: [{
browserName: 'chrome',
chromeOptions: {
args: ["--window-size=1368,700" ]
}
}],
onPrepare: ()=>{
jasmine.getEnv().addReporter(new HtmlReporter({
baseDirectory: 'test/e2e/results/',
screenshotsSubfolder: 'images',
jsonsSubfolder: 'jsons',
takeScreenShotsOnlyForFailedSpecs: true,
preserveDirectory: false,
docName: 'index.html' ,
cssOverrideFile: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'
}).getJasmine2Reporter());
},
this is version of test packages in package.json:
"jasmine": "^3.0.0",
"jasmine-core": "^3.0.0",
"jasmine-reporters": "^2.0.0",
"jquery": "^3.2.1",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.1",
...
"protractor": "^5.4.0",
"protractor-beautiful-reporter": "^1.1.1",
...
Finally here is my error. I run e2e and before everything gives me this error and then it makes selenium start:
..
[10:43:11] I/update - chromedriver: unzipping chromedriver_2.42.zip
(node:17016) UnhandledPromiseRejectionWarning: Error: EPERM: operation
not permitted, rename
'C:\ProjectPath\node_modules\protractor\node_modules\webdriver-manager\selenium\chromedriver.exe'
-> 'C:\ProjectPath\node_modules\protractor\node_modules\webdriver-manager\selenium\chromedriver_2.42.exe'
at Object.fs.renameSync (fs.js:766:18)
at unzip (C:\ProjectPath\node_modules\protractor\node_modules\webdriver-manager\built\lib\cmds\update.js:235:8)
at files_1.FileManager.downloadFile.then.downloaded (C:\ProjectPath\node_modules\protractor\node_modules\webdriver-manager\built\lib\cmds\update.js:205:13)
at
at process._tickCallback (internal/process/next_tick.js:188:7) (node:17016) UnhandledPromiseRejectionWarning: Unhandled promise
rejection. This error originated either by throwing inside of an async
function without a catch block, or by rejecting a promise which was
not handled with .catch(). (rejection id: 1) (node:17016) [DEP0018]
DeprecationWarning: Unhandled promise rejections are deprecated. In
the future, promise rejections that are not handled will terminate the
Node.js process with a non-zero exit code.
Blockquote
Okay I tried to put catch block after every test but it seemed not good and didn't get the solution.
I made ever function,on async and put before every statement await.
I tried to remove browser.wait() in beforeAll code block but it didn't work too so I take it back.
I mean my test run with success and sometimes I don't even get this warning at all. But I changed nothing then it keeps giving me this error.
How can I prevent the unhandled promise rejection?

Resources