Is it possible to separate locators in .json file while working with Cypress?
I can't seem to find anything about this online, but it seems like something that should be possible.
I separated my locator in a .json file but I have problems with calling them in my tests.
I haven't heard of anyone doing this and I wouldn't recommend it - storing selectors in the tests is the best method IMO. However if you're set on it you could store them in a file in the fixtures directory, then access them with cy.fixture(). Something like this:
cy.fixture('selectors.json').then(selectors => {
cy.get(selectors.mySelector).click()
})
Another option is to load the selectors in a before()
let selectors;
before(function(){
cy.fixture('selectors').then(s => selectors = s)
})
it('...', () => {
cy.get(selectors.mySelector).click()
})
Related
I am trying to serve a static HTML file using the res.sendFile() method from my express.js server that is hosted on AWS Lambda using the Serverless framework. Assuming that I am trying to serve an HTML file from the directory src/views/users/index.html.
In deployment, this is the file path that I have tried to serve my HTML file from /var/task/src/views/users/vindex.html, but I keep getting the error Error: ENOENT: no such file or directory, stat '/var/task/src/views/users/index.html' when viewing the AWS Cloudwatch log.
app.use(express.static(__dirname));
path.resolve(__dirname, "./src/views/users/index.html");
This is the results I get when I run tree src locally:
Have anyone experienced this issue before, and have solved it? Thank you so much!
Well, after many grueling hours and trying many solutions, I have found a workaround to render the html content without actually needing to render a .html file.
I ended up making a helper method that returns a string of the html content and send the html content string using the res.send() method instead.
html helper function
export const htmlHelper = () => {
return `<html content goes here>`;
}
route method
app.get('/html', (_, res) => {
const htmlString = htmlHelper();
return res.send(htmlString);
})
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
We have hosted jsreport node application on EBS. We created template and using css and javascripts from a static website(hosted internally). In the external javascript file we are using variables similar to what jsreport requires i.e. {{variablename}} which does not work. When we add the javascript inline in the template it works.
We know there should be some other way around to specify this but could not find it.
This won't work. jsreport templating engines only compile and process the html output, not the referenced scripts.
However you can try this approach:
Put a placeholder in a template content where you want to put external script. Lets say we want to put inline jquery
<script>
$$$myScript
</script>
<script>
$(() => {
alert('yes I have jquery inlined')
})
</script>
Create jsreport custom server script which downloads your external script, in this case jquery, and replace the placeholder with its content
var getReq = require('request').get
function beforeRender(req, res, done) {
getReq('https://code.jquery.com/jquery-3.1.0.min.js', (err, res, body) => {
req.template.content = req.template.content.replace('$$$myScript', body.toString())
done()
})
}
The script will run before the templating engines are executed therefore you can use templating engines tags inside it now.
playground live demo here
I am completely confused what I am doing wrong here.
Say I have a test file 'SimpleTest.ts' containing the following:
/// <reference path="../otherdir/simpleclass.ts" />
module MyModule.SubModule {
describe("this test", () => {
var myObject: SimpleClass = new SimpleClass("");
it("doesn't even get here!", () => {
expect(myObject).toBeDefined();
});
});
}
The class here is defined in a different file, but in the same module, like this:
module MyModule.SubModule {
export class SimpleClass {
constructor(private myMember: string) {}
}
}
So both definitions reside in the same module. Typescript compiles fine, everything looks OK.
But when I start protractor (yes, I have configured 'specs:' path to the files correctly), it stops with the error
this test
encountered a declaration exception - fail
I know that I could get it to work by using module.export and require, but this is not a good solution.
First, I loose the type checking of typescript, when I use javascript 'require', and the type checking is one of the reasons why I'm using it in the first place.
Second, I think this is bad style to mix plain javascript into typescript code.
Any help would be appreciated!
Thanks in advance,
Regards,
Jörg
Stop using internal modules.
It honestly helped me a lot when trying to understand TypeScript.
My experiences with internal TypeScript modules are answered here
.
You can read the article of Steve Fenton here for more details.
I hope this is of any help still to you.
I'm trying to internationalize my application that uses Express and Handlebars. Is it possible to get Handlebars partials (fragments) to load and render the localization resource file?
Noting that I've already read this question: express3-handlebars and 18next-node - internationalisation based on page?.
Here is my directory structure:
views/
index.html
login.html
fragments/
frag1.html
frag2.html
frag3.html
locales/
index.json
login.json
fragments/
frag1.json
frag2.json
frag3.json
If necessary, I can separate the JSON files in the locales/ directory to be something like this:
locales/
en-CA/
index.json
...other files
fr-CA/
index.json
...other files
Here is the relevant code in my server.js file:
// ...
hbs = exphbs.create({
extname: '.html',
layoutsDir: [
__dirname + '/views'
],
partialsDir: [
__dirname + '/views/fragments'
],
helpers: {
'json': function(context) {
return JSON.stringify(context);
},
't': function(k) {
// ?
}
}
});
app.engine('.html', hbs.engine);
app.set('view engine', 'html');
The t helper is what I need help with. In my templates/template fragments, I have these:
<h1>{{ t 'pageTitle' }}</h1>
<p>{{ t 'foo' }}</p>
<p>{{ t 'moreThings' }}</p>
And my JSON file could look like this:
{
"pageTitle": "Hello world",
"foo": "Paragraph contents here",
"moreThings": "There are %d things"
}
Also how do I deal with the printf parameters?
Doing internationalization in your application means doing two things:
1) Determine which locale should be used
Depending on how you determine the used locale it can be difficult to do this inside a helper. Helpers do not have access to the request object for instance. To be honest i cannot think of a good way to do this inside a helper.
Personally i use the i18n-abide middle-ware to do internationalization. They have several options to determine the locale for a given request. Once locale is determined it is added as a property to the request object. So you only need to determine the locale once for each request. An other advantage is that you have also access to the locale outside the handlebars helper.
2) Access the resource files
To access the resource files from within a helper means that you should read and parse the resource files outside the helper. Parsing resource files every time you need to translate a string really hurts performance.
Here you also should use middle-ware. You can do something like the pseudo code below.
function setup() {
// Load resource files from disk and parse them.
var resources = { /* parsed resources*/ }
return function(req, res, next) {
var locale = determineLocalFunction(req);
req.getText = function(label) {
return resources[local][label];
}
}
}
Now you can use the req.getText function every where in your code. Personally i never use language labels inside a partial. Instead i pass all the language strings needed in a partial using a data object. The reason behind this is that i think partials should be as re-usable as possible. Using hardcoded language labels inside them makes them less re-useable.
When you do want to use the getText function in your partials you can pass to getText function to your partial.
Something like this:
var objectPassedToPartial = {
getText: req.getText
}
Use it like:
{{getText 'label'}}
Read more about Mozilla's i18n-abide solution, i really love it.