Anyone got a link to documentation explaining exactly how ES6 import is supposed to work with npm packages (as opposed to javascript module files) ?
Also (and possibly related) a link to documentation on the use/significance of "module" as a top-level key in an npm package.json file ?
Eg. consider the following from juggle/resize-observer ;
package.json
{
...
"module": "lib/exports/resize-observer.js",
...
}
consumer javascript file
import { ResizeObserver } from '#juggle/resize-observer';
On the above import Chrome sends a request to the server for '#juggle/resize-observer' which is a directory..... so what happens next ? (I don't have a working instance of this and my server doesn't return anything yet as I don't know what it's supposed to / in what format ). Is this syntax only for use with some sort of build tool where it ultimately gets replaced with the actual file ?
I have looked at the npm site/googled and cannot find any relevant documentation.
UPDATE Still waiting for a link to relevant documentation (no relevant Google results at this time) but for anyone asking the same question: apparently you need your server to do "module resolution" . Alternatively you can use Snowpack or a bundler eg. Webpack.
Apparently npm/node packages are not packaged with browsers in mind or based on any W3C/Web Modules standard specification.
See here for module resolution info.
So at present to use an npm package in a browser you must do one of the following
use a bundler like webpack
use snowpack
use a CDN which resolves the module request
implement npm module resolution in your own server
Find the package entry point and use that in your ES6 import statement.
However, if the package's json "main" property changes in a subsequent update you
will need to update your code to reflect this.
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
I want to click on an element by XPATH / ID and not the default cypress locator, is it possible?
In selenium I can use find element by XPATH for example:
d.findElement(By.id("category")).click();
In Cypress it's:
cy.get('#hdtb-msb-vis > :nth-child(3) > .category').click()
Can I click by ID?
(It looks better in selenium!)
d.findElement(By.id("category")).click();
VS
cy.get('#hdtb-msb-vis > :nth-child(3) > .category').click()
In Cypress, it works like this:
cy.get('button[id="category"]').click()
Notice that I just used button as an example here, you should replace that with the label of your element: div, select, textarea, etc...
I think, it is possible by adding a plug-in as suggested in Cypress website, please refer the following link https://docs.cypress.io/plugins/#content. If you refer the custom command section you could see cypress-xpath which takes you to following github link
https://github.com/cypress-io/cypress-xpath
npm install -D cypress-xpath
Then include in your project's cypress/support/index.js
require('cypress-xpath')
Sample usage given below:
it('finds list items', () => {
cy.xpath('//ul[#class="todo-list"]//li')
.should('have.length', 3)
})
Please try after installing the plug-in and updating the support/index.js file.
Update for Cypress v 11
The answers are out of date, from version 11 Cypress core repo includes the xpath commands.
The install and usage are
#cypress/xpath
Adds XPath command to Cypress.io test runner
Install with npm
npm install -D #cypress/xpath
Install with Yarn
yarn add #cypress/xpath --dev
Then include in your project's support file
require('#cypress/xpath');
Use
After installation your cy object will have xpath command.
it('finds list items', () => {
cy.xpath('//ul[#class="todo-list"]//li').should('have.length', 3);
});
There are 2 things to be done if trying to use xpath in cypress:-
In the file 'index.js' which sits under the folder 'YourProject'->'cypress'->'support', add the entry "require('cypress-xpath')"
In the file 'Dockerfile.cypress' which sits under the folder 'YourProject'->'configuration'->'docker', add the entry "RUN npm install cypress-xpath"
That's all you need to use all the xpath functions to uniquely identify all elements in your cypress tests.
I personally prefer using xpath since this gives me more control on the UI elements. Hope this will make life more easier in using cypress.
#hdtb-msb-vis is an ID-selector and .category is a class-selector. But you should be able to select purely by the class-selector
cy.get('.category')
.click()
But if that class is not unique you can click it via the ID and then the class:
cy.get('#hdtb-msb-vis')
.find('.category')
.click()
The first question contains two different selectors, the first (selenium) look for an id category and the second for a class category.
In fact :
d.findElement(By.id("category")).click();
==
cy.get('#category').click()
So yes you could select an element by it's ID !
If (and i don't think) you want to have others possibility for selecting your elments look for jquery selector (jquery is exposed in cypress)
execute npm install -D cypress-xpath
If you using typescript. Add one file inside cypress/support/index.d.ts
Add
import './commands'; import '../../node_modules/cypress-xpath';
"types": ["cypress", "cypress-xpath"] in tsconfig.json
also add import '../../node_modules/cypress-xpath in index.js file
For ID use # and . for classes
cy.get('#category').click()
There is no direct way of using ID, Name, Class, tag name. Use css selector or various inbuild cypress commands to find the element.
For Xpath, There is no default support for XPath in Cypress. Follow below steps to install plugin and use it.
Step 1: Install XPath Plugin using below command
npm install cypress-xpath
or
yarn add cypress-xpath --dev
Step 2 Add this line to index.js in support folder
require('cypress-xpath')
Step 3 Add your xpath in xpath command like this
cy.xpath("//input[#id='edit-name']").type('Naruto')
For Detailed steps with example refer this
[Should install xpath package and then add in Support/e2e.js. After that it will show suggestion to use xpath in .js file ]
cy.xpath('//body/div[#id="app"]/div[2]/div[2]/div[1]/div[2]/div[2]/form[1]/div[1]/div[2]/div[5]/div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[2]/div[1]/div[1]/div[1]').contains('02').click()
enter image description here
I have a .js file inside an electron app that uses the quasar framework.
inside this file i have axios to make requests to my api to pull data
once i get the response i use the data for further processing. However i need some string functions to escape some strings and when i try .replace it just fails.
var t = JSON.parse(JSON.stringify(someObj))
console.log(t.message.replace(/"/g, '\\"');)
the app just fails to build and tells me there is some error in x line. if i use console.log(t.message) i see that it print the text in the terminal console, so i know the value is not null.
Also when i hover my mouse over the variable it tells me (any) not sure what this means.
image:
P.S: this is my first time working this tech stack.
turned out there was a configuration issue with babel inside electron that was using quasar framework, it didn't not accept commonjs as module and hence no vanilla javascript would work.
Just had this issue myself, I know you've answered your own question but if you can use nodejs you can install replace-string from npm and use it
command: npm install replace-string
link:
https://www.npmjs.com/package/replace-string
This issue has literally caused me a morning of work - but hope someone finds this post and fixes this issue quicker!
I would like to be able to read cells from a Google Sheet inside my Node-RED project. I've tried including the node"google-spreadsheet" (https://www.npmjs.com/package/google-spreadsheet) in my package.json, and used it in a Node-RED function, but no luck. It is likely I am formatting the node.js invocations for this function incorrectly. I was hoping someone had a working example I could refer to (i.e. a Node-RED project pulling data from Google Sheets).
To use npm modules in the Function node you need to include them in your settings.js file so they can be added to the Function node context.
Details of how to do this can be found in the doc here
e.g. to add the os module to the function context you need to add the following to the functionGlobalContext section of the settings.js file:
...
functionGlobalContext: {
osModule:require('os')
}
...