k6 environmental variables results in GO error "invalid character" - k6

k6 docs make using environmental variables very simple and I tried following their instructions, but I get a GO error when I try to run it:
ERRO[0000] GoError: parse https://${__ENV.TARGET_ENV}-api.mycompany.com/v1/managers/259999/properties": invalid character "{" in host name".
I don't see an extra bracket anywhere. This script was working fine when I had the url as https://green-api.mycompany.com/v1/managers/259999/properties. Am I possibly missing an import or dependency somewhere? All I am trying to do is get it working to where when i type k6 run --env TARGET_ENV=green propertiesScript.js, it executes against http://green-api.mycompany.com/v1/managers/259999/properties. Here is the file:
import { check } from "k6";
export let options = {
thresholds: {
http_req_duration: ["p(90)<300"], // 95% of requests should be below 200ms
Errors: ["count<100"],
},
};
export default function () {
var url =
"https://${__ENV.TARGET_ENV}-api.mycompany.com/v1/managers/259999/properties";
const params = {
headers: {
"X-App-Token": "<our app token>",
"X-Auth-Token":
"<our auth token>",
accept: "application/json",
},
};
let res = http.get(url, params);
console.log(res.body);
console.log(JSON.stringify(res.headers));
check(res, {
"status is 200": (r) => r.status === 200,
});
}
I also tried adding scenarios and adjusting the body of my file. These are the scenarios:
thresholds: {
http_req_duration: ["p(90)<300"], // 95% of requests should be below 200ms
Errors: ["count<100"],
},
scenarios: {
pod_green: {
tags: { my_custom_tag: "green" },
env: { MYVAR: "green" },
executor: "shared-iterations",
},
pod_red: {
tags: { my_custom_tag: "red" },
env: { MYVAR: "red" },
executor: "shared-iterations",
},
staging: {
tags: { my_custom_tag: "staging" },
env: { MYVAR: "staging" },
executor: "shared-iterations",
},
},
};
Then I edited my export default function and I was able to get that script to run, but it runs against every single environment.

You need to use backticks when you set the url variable for string interpolation to work in template literals. See the documentation.
So in your case you should have:
var url =
`https://${__ENV.TARGET_ENV}-api.mycompany.com/v1/managers/259999/properties`;

Related

How to configure cypress-sql-server with no cypress.json? (updated)

I'm trying to setup cypress-sql-server, but I'm using version 10.8.0, which does not use cypress.json to configure the environment. All of the setup instructions I've found refer to using cypress.json to configure the plug-in. With the help of u/Fody, I'm closer, but I'm still running into an error:
tasksqlServer:execute, SELECT 'Bob'
CypressError
cy.task('sqlServer:execute') failed with the following error:
The 'task' event has not been registered in the setupNodeEvents method. You must register it before using cy.task()
Fix this in your setupNodeEvents method here:
D:\git\mcare.automation\client\cypress\cypress.config.jsLearn more
node_modules/cypress-sql-server/src/commands/db.js:7:1
5 | }
6 |
> 7 | cy.task('sqlServer:execute', query).then(response => {
| ^
8 | let result = [];
9 |
cypress.config.js
const { defineConfig } = require("cypress");
const sqlServer = require("cypress-sql-server");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// allows db data to be accessed in tests
config.db = {
"userName": "user",
"password": "pass",
"server": "myserver",
"options": {
"database": "mydb",
"encrypt": true,
"rowCollectionOnRequestCompletion": true
}
}
// code from /plugins/index.js
const tasks = sqlServer.loadDBPlugin(config.db);
on('task', tasks);
return config
// implement node event listeners here
},
},
});
testSQL.spec.js
describe('Testing SQL queries', () => {
it("It should return Bob", () => {
cy.sqlServer("SELECT 'Bob'").should('eq', 'Bob');
});
})
My versions:
\cypress> npx cypress --version
Cypress package version: 10.8.0
Cypress binary version: 10.8.0
Electron version: 19.0.8
Bundled Node version:
16.14.2
Suggestions? Is there any more info I can provide to help?
This is the install instruction currently given by cypress-sql-server for Cypress v9
Plugin file
The plug-in can be initialised in your cypress/plugins/index.js file as below.
const sqlServer = require('cypress-sql-server');
module.exports = (on, config) => {
tasks = sqlServer.loadDBPlugin(config.db);
on('task', tasks);
}
Translating that into Cypress v10+
const { defineConfig } = require('cypress')
const sqlServer = require('cypress-sql-server');
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// allows db data to be accessed in tests
config.db = {
"userName": "user",
"password": "pass",
"server": "myserver",
"options": {
"database": "mydb",
"encrypt": true,
"rowCollectionOnRequestCompletion": true
}
}
// code from /plugins/index.js
const tasks = sqlServer.loadDBPlugin(config.db);
on('task', tasks);
return config
},
},
})
Other variations work, such as putting the "db": {...} section below the "e2e: {...}" section, but not in the "env": {...} section.
Custom commands
Instructions for Cypress v9
Commands file
The extension provides multiple sets of commands. You can import the ones you need.
Example support/index.js file.
import sqlServer from 'cypress-sql-server';
sqlServer.loadDBCommands();
For Cypress v10+
Just move this code to support/e2e.js
cypress.json is a way to specify Cypress environment variables. Instead of using a cypress.json file, you can use any of the strategies in that link.
If you just wanted to include them in your cypress.config.js, it would look something like this:
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:1234',
env: {
db: {
// your db values here
}
}
}
})

Configure eslint to read common types in src/types/types.d.ts vue3

My eslint .eslintrc.js, now properly in the src folder, is the following:
module.exports = {
env: {
browser: true,
commonjs: true,
es2021: true
},
extends: [
'plugin:vue/vue3-recommended',
'standard',
'prettier'
],
parserOptions: {
ecmaVersion: 2020,
parser: '#typescript-eslint/parser',
'ecmaFeatures': {
'jsx': true
}
},
plugins: [
'vue',
'#typescript-eslint'
],
rules: {
'import/no-unresolved': 'error'
},
settings: {
'import/parsers': {
'#typescript-eslint/parser': ['.ts', '.tsx']
},
'import/resolver': {
'typescript': {
'alwaysTryTypes': true,
}
}
}
}
I'm attempting to use eslint-import-resolver-typescript, but the documentation is a bit opaque.
I currently get errors on lines where a externally defined type is used (StepData in this example):
setup() {
const data = inject("StepData") as StepData;
return {
data,
};
},
The answer was the following. In types.d.ts (or other file if you want to have different collections of your custom types):
export interface MyType {
positioner: DOMRect;
content: DOMRect;
arrow: DOMRect;
window: DOMRect;
}
export interface SomeOtherType {
.. and so on
Then in the .vue files, import the types I need for the component:
import type { MyType, SomeOtherType } from "../types/types";
Before I was not using the export keyword and the types just worked without being imported. They have to be imported like this if you use export. It's kind of amazing how you are just expected to know this, the documentation for Typescript or Vue is sorely lacking in examples.

Is there a way to show related model ids without sideloading or embedding data

My understanding is that using serializeIds: 'always' will give me this data, but it does not.
Here's what I'm expecting:
{
id="1"
title="some title"
customerId="2"
}
Instead the output I'm receiving is:
{
id="1"
title="some title"
}
My code looks something like this:
import {
Server,
Serializer,
Model,
belongsTo,
hasMany,
Factory
} from "miragejs";
import faker from "faker";
const ApplicationSerializer = Serializer.extend({
// don't want a root prop
root: false,
// true required to have root:false
embed: true,
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always"
});
export function makeServer() {
let server = newServer({
models: {
invoice: Model.extend({
customer: belongsTo()
}),
customer: Model.extend({
invoices: hasMany()
})
},
factories: {
invoice: Factory.extend({
title(i) {
return `Invoice ${i}`;
},
afterCreate(invoice, server) {
if (!invoice.customer) {
invoice.update({
customer: server.create("customer")
});
}
}
}),
customer: Factory.extend({
name() {
let fullName = () =>
`${faker.name.firstName()} ${faker.name.lastName()}`;
return fullName;
}
})
},
seeds(server) {
server.createList("invoice", 10);
},
serializers: {
application: ApplicationSerializer,
invoice: ApplicationSerializer.extend({
include: ["customer"]
})
},
routes() {
this.namespace = "api";
this.get("/auth");
}
});
}
Changing the config to root: true, embed: false, provides the correct output in the invoice models, but adds the root and sideloads the customer, which I don't want.
You've run into some strange behavior with how how serializeIds interacts with embed.
First, it's confusing why you need to set embed: true when you're just trying to disable the root. The reason is because embed defaults to false, so if you remove the root and try to include related resources, Mirage doesn't know where to put them. This is a confusing mix of options and Mirage should really have different "modes" that take this into account.
Second, it seems that when embed is true, Mirage basically ignores the serializeIds option, since it thinks your resources will always be embedded. (The idea here is that a foreign key is used to fetch related resources separately, but when they're embedded they always come over together.) This is also confusing and doesn't need to be the case. I've opened a tracking issue in Mirage to help address these points.
As for you today, the best way to solve this is to leave root to true and embed false, which are both the defaults, so that serializeIds works properly, and then just write your own serialize() function to remove the key for you:
const ApplicationSerializer = Serializer.extend({
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always",
serialize(resource, request) {
let json = Serializer.prototype.serialize.apply(this, arguments);
let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)
return json[root];
}
});
You should be able to test this out on both /invoices and /invoices/1.
Check out this REPL example and try making a request to each URL.
Here's the config from the example:
import {
Server,
Serializer,
Model,
belongsTo,
hasMany,
Factory,
} from "miragejs";
import faker from "faker";
const ApplicationSerializer = Serializer.extend({
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always",
serialize(resource, request) {
let json = Serializer.prototype.serialize.apply(this, arguments);
let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)
return json[root];
}
});
export default new Server({
models: {
invoice: Model.extend({
customer: belongsTo(),
}),
customer: Model.extend({
invoices: hasMany(),
}),
},
factories: {
invoice: Factory.extend({
title(i) {
return "Invoice " + i;
},
afterCreate(invoice, server) {
if (!invoice.customer) {
invoice.update({
customer: server.create("customer"),
});
}
},
}),
customer: Factory.extend({
name() {
return faker.name.firstName() + " " + faker.name.lastName();
},
}),
},
seeds(server) {
server.createList("invoice", 10);
},
serializers: {
application: ApplicationSerializer,
},
routes() {
this.resource("invoice");
},
});
Hopefully that clears things up + sorry for the confusing APIs!

nightwatch.js / Saucelabs - click() not working [ An error occurred while running .click() command on <Element [name=#login_submitButton]>]

I have been trying to run e2e test cases for a React app using Nightwatch.js + Saucelabs, but is facing the below error while .click() method executes.
Error:
An error occurred while running .click() command on : {"status":-1,"state":"","value":"{\"value\": {\"stacktrace\": \"Backtrace:\n\tOrdinal0 [0x00E07DF3+1474035]\n\tOrdinal0 [0x00D807D1+919505]\n\tOrdinal0 [0x00D1CB43+510787]\n\tOrdinal0 [0x00CCDB60+187232]\n\tOrdinal0 [0x00CCD9B5+186805]\n\tOrdinal0 [0x00CA1BAB+7083]\n\tOrdinal0 [0x00CA2126+8486]\n\tOrdinal0 [0x00CA2F00+12032]\n\tGetHandleVerifier [0x00F6231C+1249612]\n\tGetHandleVerifier [0x00EB1575+525221]\n\tGetHandleVerifier [0x00EB1310+524608]\n\tOrdinal0 [0x00E15D28+1531176]\n\tGetHandleVerifier [0x00EB1D4A+527226]\n\tOrdinal0 [0x00D975F6+1013238]\n\tOrdinal0 [0x00D9746F+1012847]\n\tOrdinal0 [0x00CA1A16+6678]\n\tOrdinal0 [0x00CA174A+5962]\n\tGetHandleVerifier [0x0120992C+4032348]\n\tBaseThreadInitThunk [0x774438F4+36]\n\tRtlUnicodeStringToInteger [0x77B35E13+595]\n\tRtlUnicodeStringToInteger [0x77B35DDE+542]\n\", \"message\": \"invalid argument: missing command parameters\", \"error\": \"invalid argument\"}}","errorStatus":-1,"error":"An unknown error has occurred.","httpStatusCode":400}
Below is the page object:
module.exports = {
url: function () {
return this.api.launchUrl
},
elements: {
app: { selector: 'div[id="app"]' },
login_usernameInput: { selector: 'input[id="user_id"]' },
login_passwordInput: { selector: 'input[id="password"]' },
login_submitButton: { selector: 'button[id="submit"]' }
},
commands: [
{
login () {
return this
.waitForElementPresent('span[id=welcomeToMyApp]')
.setValue('#login_usernameInput', process.env.APP_USERNAME)
.setValue('#login_passwordInput', process.env.APP_PASSWORD)
.click('#login_submitButton')
.waitForElementPresent('#app')
}
}
]
}
Test code:
module.exports = {
beforeEach: (browser, done) => {
browser.page.loginPage()
.navigate()
.login()
done()
},
'Test - DQM Page': function (browser) {
const dqmPage = browser.page.dqmPage()
dqmPage
.navigate()
.waitForElementVisible('body')
.click('#nextCountryTab')
.assert.visible('#nextCountry')
.end()
},
afterEach: (browser, done) => {
browser.custom().end()
setTimeout(function () {
done()
}, 200)
}
}
All the other steps, before click() in the login() method works perfectly fine. Even the setValue() functions are executed pretty well.
Please note, the submit button is pretty much visible and clickable.
I fixed this by specifying to use the previous version of Chrome (which right now is 74).
"desiredCapabilities": {
... clipped out my other capabilities for brevity ...
"version": "latest-1"
}
I then changed it to specifically say version 74. Both of these work but I don't want Chrome to upgrade to 76 and then tests start failing again if we haven't finished adopting whatever the real fix is.
"desiredCapabilities": {
... again - clipped for brevity ...
"browserName": "chrome",
"version": "74.0"
}
What SauceLabs says should work is the following. It doesn't work for me. I got this from their blog post at https://wiki.saucelabs.com/pages/viewpage.action?pageId=88801611
"desiredCapabilities": {
... clipped other configs again ...
"goog:chromeOptions": {"w3c": false}
}
I was able to fix this issue by updating to the newest version of Nightwatch. But the update broke other things. Here is some documentation on what might break after the update.
https://github.com/nightwatchjs/nightwatch/wiki/Migrating-to-Nightwatch-1.0

http into a service with Angular2 with es5

I am working with Angular2 and es5. I want to use http in a service.
Unfortunately I have 2 errors:
- http is undefined, but ng.http.Http is defined,
- I have this error for the main component:
vendor-client.min.js:28 EXCEPTION: Can't resolve all parameters for class0: (t, ?)
Here is my service code:
;(function(app, ng) {
console.log(new ng.http.Http());
app.ApplicationsService = ng.core.Injectable().Class({
constructor: [ng.http.Http, function(http) {
console.log(http);
this.applicationsEmailUrl = 'api/applications/email';
this.http = http;
}],
emailExists: function(email) {
console.log(email);
var data = { email: email };
return this.http.post(this.applicationsEmailUrl, data)
.toPromise()
.then(function(response) { response.json().data; })
.catch(this.handleError);
}
});
})(window.app || (window.app = {}), window.ng);
Here is the main component:
;(function(app, ng) {
app.AppComponent = ng.core
.Component({
selector: 'register-form',
templateUrl: 'src/register/app.component.html'
})
.Class({
constructor: [ng.core.ElementRef, app.ApplicationsService, function(ref, Applications) {
console.log('app.component.js');
this.programs = JSON.parse(ref.nativeElement.getAttribute('programs'));
this.applications = Applications;
}],
emailExists: function(email) {
console.log('emailExists() triggered');
Applications.emailExists(email);
}
});
})(window.app || (window.app = {}), window.ng);
The bootstrap:
;(function(app, ng) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(app.AppComponent, [
ng.forms.disableDeprecatedForms(),
ng.forms.provideForms(),
ng.http.HTTP_PROVIDERS,
app.ApplicationsService
]);
});
})(window.app || (window.app = {}), window.ng);
If I try to inject http into the main component within the providers array, it works. But I would rather prefer to have a service.
I found out the problem. Looks like Angular2 needs to load your code in order. The main component was loaded before the service, so it was undefined. I put all my code in one file and it works. I will use a require loader asap.

Resources