cypress GUI cannot target element in shadow dom in e2e testing - testing

I am using the cypress GUI for some e2e testing and I want to click on an element in the UI to get the suggested selector.My problem is that my UI is in the shadow DOM and the selector selects the whole body of the shadow host element instead of targeting the element
In my example below I cannot target the View More button as it gets overlapped by the shadow host
I went to my cypress.config.js and added this for e2e testing but it did not solve the problem
e2e: {
includeShadowDom: true,
},
I would appreciate your help.

Related

Element inaccessible via Cypress Test Runner that is accessible via a regular browser

Click here for image that compares the two different results returned for the same javascript command.
On the left is the image of the web page run inside Cypress Test Runner.
On the right is the image of the web page is a regular browser.
To produce the same result :
In standalone Chrome, load this url, open dev tools and then run the javascript command shown below.
document.querySelector('body#google-amp-body > amp-analytics:nth-child(3) > script')
Copy the following code into a spec file and run it inside Cypress Test Runner. Then open dev tools in the Test Runner window and run the same javascript command. You won't get anything back for this use case. See above screenshot to get a visual sense of what I mean.
If I try to perform cypress tests based on that element in Cypress I get nowhere because that element cannot be found inside Cypress.
If I access the same element via Python/Selenium code, it works fine.
describe('Gamespot Test', () => {
it('Tests for Video Page', () => {
const url = "https://gamespot.com/amp-videos/rainbow-six-extraction-final-preview/2300-6457072/"
cy.visit(url)
})
})

How to run ExtJS in Cypress testing?

Is there a way to inject ExtJS library inside Cypress testing environment?
For example, I have a grid with itemID: 'something' and I would like to fetch it in a test using Ext.down('#something');
Currently I get an error that
Ext is not defined
Is there a way to include it?
In the project ExtJS is added using <script> tag in index.html

How should I change the Vue route by using an Electron Menu click() event?

On my builds I can route through the router-links to each component but not through the Menu click() events.
From the menu template, I try to change the route by using:
win!.loadURL(“http://localhost:8080/login”), for ex., but it simply goes blank (for any URL) when running the build.
Also, if I import the router and try to use router.push(), at the main process, it ends up in a lot of errors, and also doesn’t work.
If I use electron:serve, though, instead of running the build, it works fine. Although it reloads the page from the Menu, differently from the router-links, through which it keeps at the same page and simply changes the route component.
I need a build that changes the route view both from the Menu as from the router-links.
So, how can I change the route of my SPA from the Electron Menu and make it run on a final build as it kind of works when running the dev project by calling electron:serve ?
How should I change the Vue route by using an Electron Menu click() event ?
Full Project:
https://github.com/danielpm1982/open-weather-client
You can't change the route or use the Vue-router from inside the Electron main process, as you also can't access the Electron Menu from inside any Vue component for activating / deactivate submenus according to the login state (another doubt I had posted and answered myself).
Electron Menus should always be managed at the Electron main process.
Vue routes should always be managed at the Electron renderer process - from inside Vue components.
So, as the events are generated on layers different from the ones where they should be treated, in both cases, just notify each other layer, through IPC messages, that you want that thing to change and it will be changed there, at the proper layer.
In the case of changing the Menu, the login / logout Vuex state is checked inside the Vue components, then the component sends an IPC call to the main process and the submenus are activated or deactivated there.
See this solution on the link:
How to activate / deactivate an Electron.js submenu from inside a Vue.js Component according to a specific Vuex state?
Another similar solution is the one for this post problem, but the other way around:
For changing the routes, instead of using win.loadURL() or win.loadFile() at the main process side, one should send an IPC call to the renderer side, in this case to the App.vue component, using win!.webContents.send("changeRouteTo", "/"), for example. The "changeRouteTo" is a custom channel name and the "/" is the path to which the router, from inside the Vue component, at the renderer side, will change the route to - for the "/" it's the "Home" route. For changing to the "Login" route, the path would be "/login", and so on... according to the router.ts config. At the renderer side, in this case at the App.vue component, it is set an IPC renderer listener for the "changeRouteTo" channel or event, and, each time it receives a route change request from the main process, then this.$router.push() is used, from inside this component, to change the route to that correspondent route.
This should work both for development and non development environments, when using npm run electron:serve to run the project, as for the final build execution, after npm run electron:build is called and a bundle is created.
Hope this solution is useful to others.
See the full final project here, it's a pretty nice sample app:
https://github.com/danielpm1982/open-weather-client

Can I run Durandal's Tests Framework outside of PhantomJS?

The Durandal Test Framework runs Jasmine tests within PhantomJS.
Where I'm implementing this for the first time I'm getting a lot of errors, and reading through these on the command prompt is proving to be very tedious.
If I load up the spec.html file in my web browser, it tells me that no specs were found:
Yet PhantomJS is able to find the specs with no problem:
Is there a way I can configure these Jasmine tests to run through my web browser and not through (or as well as) PhantomJS?
I've set up a new index.html file and have replaced the var runTests = ... section with a simple require() call:
require(['../test/specs/system.spec.js']);
Durandal's system.spec.js file is loaded in the browser, but Jasmine is still stating that no specs were found.
Jasmine's tests weren't being run because I wasn't telling it to re-execute. The solution to this was to simply re-execute by calling this within the require callback:
require(['../test/specs/system.spec.js'], function() {
jasmine.getEnv().execute();
});
Note: A drawback of this is that the 'no specs found' bar is still present and the 'raise exceptions' control on the re-executed specs doesn't appear to function:

AngularJS : e2e tests with Karma Scenario Test Runner using cached source?

I am trying to set up some AngularJS e2e tests with Karma Scenario Test Runner. I did some modifications to the source files, but Karma doesn't seem to use these latest versions when testing.
In the source files, I added ids to some elements. Karma still couldn't find them, so I added a pause in the e2e test, so that I can mark and "Inspect elements" (using Chrome) on the current page in the test runner. The source code seems correct, except the latest changes are missing, i e, the ids aren't there. So what's happening here? Do I need to explicitly tell Karma the files have been updated somehow?
You can fix this issue by forcing angularjs to clear the application cache:
app.run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$templateCache.removeAll();
});
});
In Chrome developer tools settings, check "Disable cache (while DevTools is open)".
Obviously, this is a much more general issue than Angular's e2e test runner, but I decided to leave it here for now, in case somebody else has the same question.