Codeceptjs doesn't load most elements, waitForNavigation() just causes it to freeze forever - automated-tests

I am having an issue testing with codeceptjs. I am attempting testing apps on the Atlassian cloud but codeceptjs/puppeteer cannot interact with any of the elements on the page. When I enable screenshots I see it is on the right page but codeceptjs can only find the elements in the navigation menu. it cannot even find the body element either by selector or xpath.
I tried adding I.waitForNavigation() but the tests never advance past that step. I tried to set a timeout in the config section as they say in the docs here but I am having no luck. I tried everything they suggested but it just waits there forever. if I comment out I.waitForNavigation() it will fail because it cannot find a Boyd element. I am using the default config file that gets created when you install codeceptjs in a directory. this the code I am trying to test but it is causing all kinds of issues.
I.amOnPage('https://artemis-test2.atlassian.net/wiki/plugins/servlet/ac/com.nurago.confluence.plugins.treecopy/copy-page-tree-confluence?page.id=25821196&space.key=TEST1');
I.waitForNavigation();
// if I don't comment this out it will wait here forever
I.wait(4);
I.waitForElement('.ap-iframe');
// it can find the iframe for some reason but nothing else
I.waitForElement('.body');
// if I do comment it out it fails here because it says there is no body element. can't find it by xpath either.
I have no idea why this is happening. any help is greatly appreciated.

amOnPage with default config runs navigation and passes after navigation.
waitForNavigation will start to wait navigation after navigation. So it never happens, if you will not run navigation again or page redirect starts.
You have 2 choices:
not to use waitForNavigation and use amOnPage only.
use waitForNavigation and amOnPage within Promise.all: await Promise.all(I.waitForNavigation(); I.amOnPage(pageUrl));

Related

Wordpress menu links stop working intermittently

This issue started occurring today: the menu links stop working intermittently (I try clicking, and nothing happens) and I can only get them to start working again by doing a few refreshes. Then again, after moving around the menu a few times, the links stop working.
I noticed this problem on the localhost and then, to test it, I uploaded the website to a webspace and the problem is still there (also tried two different computers, clearing cache, etc.).
The test page is here: http://toulouse.xardas.lima-city.de/en/
I have deactivated several plugins and tried retracing my steps to see if anything I did today could have caused it (I mainly worked on changing the image sizes on the main page in CSS), but I couldn't find the cause.
I have tried the trick where you re-save the permalinks once with a new structure, and then change them back to what they were again and save. That didn't help.
I'm at a loss.
Your problem its not related to plugins, your website has 2 critical javascript errors that show up on the console and they seem to be disabling your website Javascript:
jquery.min.js is no able to load.
masonry.pkgd.js is not able to load.
Both errors are occurring because WordPress its trying to load them from a local server of yours (127.0.0.1).
Since your website its not on a local server, you need to change the tag that refers to those scripts and update the src to the real address of those libraries.
You can need to make sure that this script:
<script type="text/javascript" src="http://127.0.0.1/wordpress/wp-content/themes/elisabethzeigt-topmenu/js/jquery.min.js"></script>
Gets replaced with this:
<script src="http://toulouse.xardas.lima-city.de/wp-content/themes/elisabethzeigt-topmenu/js/jquery.min.js"></script>
The only thing that was updated was the initial part of the src: "http://toulouse.xardas.lima-city.de/" instead of "http://127.0.0.1/wordpress/".
Remember: You should to the same to the other script tag of the masonry library.
If you don't know how to replace them: just search for "jquery" and "masonry.pkgd.js" in your functions.php file and you will find the lines of code.
There is a chance that you functions.php has a global variable with the path to your website and you can fix the issue updating that variable instead of the scripts.

CSS stops working in Chrome after opening console

I'm making an app with node.js and have a few html pages that are styled with one css file. After I click on a link (to a subpage) on the home page and open it in a new tab, everything seems fine. However, after I push ctrl+F12 and open the console, the css styles somehow 'stop working', which means:
the elements are not styled, even though there is the link tag with style.css in 'Elements' tab in html
In Network tab, I can only see style.css file with status 304 listed there (all other js files are not there, even though JS scripts work)
When I return to the home page, the css styles are not visible as well (they were before new tab was open, now it's 304 status in Netwok). After refreshing, styles go back (along with status 200).
After I refresh the subpage, everything is fine again, opening console does nothing to styles (Network tab shows all the files, including style.css with status 200). After closing/ opening console again, everything is okay too.
If I dont't refresh the subage, the styles "come back" when I change window size (although not immediately, after a second). Otherwise there's just html with working js scripts.
This happens only in Chrome (version 53.0.2785.101), only after opening console for the first time. I have no clue why this might be happening.
Please help!
Ok, I managed to solve this. This issue seems to be Chrome bug, discussed for example here:
https://bugs.chromium.org/p/chromium/issues/detail?id=647151
https://bugs.chromium.org/p/chromium/issues/detail?id=648023
I am not sure whether my solution is perfect, but it now it seems to work. I just added one option into express.static in my server.js (I use Express JS):
app.use(express.static('public', {maxAge: '5d'}));
I guess the max-age property is crucial here - it's specified in Cache-Control http header (you can see this in Dev Tools console in Network tab, after clicking on given file). Found this solution mentioned in the first link. If I see further issues, I will update this answer.
I'm sorry I can't explain this problem in details.
Edit: this solution has one major flaw: when I edit my files, the browser still loads the older versions. Therefore, I turn this max-age property off when I wish to see the changes in files. If anyone has better fix, please share.
Try clearing your cache in chrome, then restart chrome and try again.
(A 304 response header is not an error necessarily. It just means that the browser should load the resource from cache. Basically the browser says "Hey, Can I use the same copy of that CSS file that you gave me last time, or has it changed?" and the Server says "It hasn't changed, go ahead and use the copy you have" AKA 304)
If that doesn't fix the issue, you may look into ETags

Adobe tag manager - Direct Call Routes - Direct call rule "DCTEST" not found

Just wanted to know if anyone has ever seen this error when setting up Adobe Tag Manager Direct Call Routes. Direct call rule "DCTEST" not found.
I've logged created a new direct call rule named it DC TEST
In the conditions section named it DCTEST
In Adobe Analytic selected -> s.t(); - increment a pageview
Then in Javascript selected Non-Sequential and created a javascript script and added
window.alert("DC Fired")
Then in my localhost called
_satellite.track("DCTEST");
I get the error:
SATELLITE: Direct call Rule "DCTEST" not found
Event based tracking works and datalayer is populated as expected but when creating a direct call rule it doesn't seem to find what I've set up?
Followed the adobe video but still no luck?
https://outv.omniture.com/?v=tvaTY4ZzoJ087ioJpJptl9npM_8QGDxU
Any ideas?
Can anyone get the video to tutorial to work?
https://outv.omniture.com/?v=tvaTY4ZzoJ087ioJpJptl9npM_8QGDxU
Thanks
That error message is output when
a) The direct call rule doesn't exist
b) The direct call rule isn't published and you are in published/live mode (which is effectively the same thing as (a), in principle)
If you are using the production tag, you can put it into staging/debug mode by entering the following into your js console:
localStorage.setItem('sdsat_stagingLibrary',true);_satellite.setDebug(true);location.reload();
You can make a browser bookmark out of it like so:
javascript:try{localStorage.setItem('sdsat_stagingLibrary',true);_satellite.setDebug(true);location.reload();}catch(e){}
Then you can just press a bookmark button to put it into staging/debug mode.
Also there is an Adobe DTM Switch browser plugin which basically does the same thing (though it doesn't reload the page when you flip switches, so you still have to do that for it to take effect).

Chrome caching CSS but not loading images inside CSS file

We're having a weird problem at work that happens only in chrome. It looks like the css file is getting cached and the content of this file isn't getting re-downloaded.
The problem is that when using a fresh session for example "private session", the image "mainSprite.png" isn't getting displayed.
After some tests, I believe the problem is related to us doing redirects at the beginning if the user isn't authenticated. From what I understand, it might not complete the download of the sprites linked inside the css files. It will cache an invalid object as soon as the redirect starts and then on the following pages, it will fail to display a correct image since it cached something wrong.
The strange thing is that it actually loads the image completely at some point. But it looks like it's not refreshing it in memory...
I did a timeout of one second before starting redirects on first load and images correctly display. This is a quick fix and I can't expect every computer to load in 1 second every images contained in the css.
edit
As far as I can say, it really looks like a race condition. I changed the order of loading. We use require.js. Instead of loading js after css, I start js loading before. And images are getting loaded correctly now on my local server.
if someone is interested to look into it:
http://api.checklist.com
edit 2
When images aren't visible, opening new tabs will have the same problem. Closing the browser and reopening it will work on first load and images isn't being downloaded but loaded from Cache which means that before closing the browser, the image was indeed downloaded.
It looks like the problem coming from your redirects unfortunately i couldn't see your example ( link won't open ). Google chrome has indeed issues with caching it's annoying during development time ( clear up the cache, load new image, do the same for new image..), if you need to clear your cache try the folowing:
try to go to
chrome://chrome/settings/clearBrowserData
in your chrome browser and check the options:
Empty the Cache( i have also Clear download history and Delete cookies and other site and plug-in data )
click on 'Clear Browsing Data' button it should
All what you need to do is to trace your cash list via chrome, and from what I see is that you got this error which make it not cached:
Uncaught TypeError: Object [object Object] has no method 'placeholder'
So if you want to trace, you can use the manifest offline mode or you trace via your code.
Just following and test your page, I did catch where the error is:
file: scripts2.js Line 20 --> $('input[placeholder]').placeholder();
which you need to check the name of the place holder and change it here in this tag.
Thank you
I assume your server/backend app has routes set up. Like this Play! framework example:
# Ignore favicon requests
GET /favicon.ico 404
# Map static resources from the /app/public folder to the /public path
GET /public/ staticDir:public
# Catch all
* /{controller} {controller}.index
According your summary I suggest to set up a static folder route (where the images are) in config file or htaccess as you want, then check image url in browser url bar (with empty session). That should work!
First I would suggest that you first try to find ways to narrow the redirects. If it possible I would suggest that it would be much more advisable to try to create your content dynamically based on your users authentication using languages like PHP or ASP (just to name two).
The classic way of disabling the caching on a webpage is to set two <meta> tags inside of your <head> </head> tags. However, you should note that these are technically not "correct" as they are not part of any of the "offical" standards documentation. This also means that I would again lean towards my first suggestion of finding a better delivery system which in turn should prevent the problem.
So for "testing" purposes the tags would be:
<HEAD>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
</HEAD>
Maybe I don't understand your question or dilemma (maybe because of lack of explanation or because I can't see your page at that link since I run Chrome), but there's an example I ran across here that works in Chrome by just using Javascript/jQuery to load, instead of CSS:
http://jsfiddle.net/2Cgyg/6/
Use image at URL: http://www.w3schools.com/cssref/img_tree.gif
And although the accepted answer didn't work for me in Chrome, this is the question I got the jsFiddle above, from:
Load Image from javascript
All the caching, etc. is unnecessary, and even something you wouldn't want to do if your images are ever updated to something else - they won't appear without forcing a refresh which you can only do through altering the file name like this to avoid users not seeing your updated image:
myPic.jpg?MMDDYYYY
And you could set the date according to the date you are modifying it.
clean your browser history like cache,cookies
clean the temporary internet file
if problem not solved then reinstall browser your problem is solved definitely

Chrome Extension: Communication iframe <-> Content Script

Well, a often discussed thing. But I can't get it work. What has to be done:
The Content or Background Script has to communicate with the iframe et vice versa.
The iframe is under my hand, so there is everything possible.
I tried a lot. It doesn't work at all. For instance: If I deploy the content script on every page with allFrames=true via (manifest). Ok, makes sense. The iframe is created later so the trigger won't be called. So let's do this: create the iframe and afterwards sending an executeScript request:
chrome.tabs.executeScript(tabinst.tab_id, { allFrames: true, file:'frame.js'}, function() {
console.log("done");
});
But that doesn't work either. Has anyone a solution to communicate with an XDM iframe and a chrome extension?
PS: How nice it would be if the chrome extension would allow postMessage on iframe
EDIT1:
The code doesn't get injected in the iframe. Scenario:
The file "file.js" has a simple foo function in it. I now apply it with the above statement 2 seconds after the iframe was created and showed. This function foo is not available in the iframe...but is in the content script. The ReferenceError is thrown by trying to execute foo within the iframe (by click).
So, it's not a timing thing. And it doesn't matter if I apply the Scripts via manifest and all_frames true. If that would work, the content_script would be available. But is not.
EDIT2:
#serg
Yeah, thanks, that works! I just got through it. My problem was, that I assumed that when the callback of chrome.tabs.executeScript is called, the requested script is ended and the including DOM manipulation finished. But that's actually not the case. It takes some time till the script in the iframe and the containing listener is ready.
So I had to send a chrome.extension.sendRequest from that script in the iframe and then start some code out of the background listener to manipulate the iframe. Thanks for your help.
PS: It's also possible to do it without "all_frames": true. It just takes some time till the dynamic iframe is ready. With a timeout it works. For the most cases, this is not useful, but maybe someone has another user interaction first.
PPS: I still can't see why it's possible like this, and not possible to send postMessage events. But maybe somewhen this will works.
I just tested and content script is getting injected into dynamically created iframes (I used manifest). I think the problem is you are trying to access content script's function within iframe, which is not allowed.
Inside your iframe you can't just do:
<a onclick="contentScriptFunction()"></a>
You need to be adding event listener from within the content script:
$("a").click(contentScriptFunction);

Resources