I use Page Objects in nightwatch, I config the page_objects_path in nightwatch.conf.js, but when I reference these elements defined, got error. I don't know why.I use vue-cli to build the project.
Here's my configuration:
nightwatch.conf.js
...
page_objects_path: 'test/e2e/pages',
...
The page object file register.js:
module.exports = {
elements: {
genderField: '.common-picker:first-child',
genderPicker: '.picker',
genderOptionLast: '.picker-item:last-child',
genderPickerConfirmButton: '.picker-toolbar span:last-child',
genderPickerCancelButton: '.picker-toolbar span:first-child'
}
}
Using the page object in test files:
'select a gender option': function (browser) {
browser
.assert.hidden('#genderPicker')
.click('#genderField')
.pause(1000)
.click('#genderOptionLast')
.click('#genderPickerConfirmButton')
.assert.containsText('#genderField', '女士')
.pause(1000)
.end()
}
Error info:
The Page Object File should have the keyword selector for every element.
module.exports = {
elements: {
genderField: {
selector: '.common-picker:first-child'
},
genderPicker: {
selector: '.picker'
},
genderOptionLast: {
selector: '.picker-item:last-child'
},
genderPickerConfirmButton: {
selector: '.picker-toolbar span:last-child'
},
genderPickerCancelButton: {
selector: '.picker-toolbar span:first-child'
}
}
}
You need to define your page object as a constant at the top of the test, and then call the elements from the registerPage object:
'select a gender option': function (browser) {
const registerPage = browser.page.register();
registerPage.assert.hidden('#genderPicker')
registerPage.click('#genderField')
browser.pause(1000)
registerPage.click('#genderOptionLast')
registerPage.click('#genderPickerConfirmButton')
registerPage.assert.containsText('#genderField', '女士')
browser.pause(1000)
browser.end()
}
You don't need selectors in your page objects if you're using CSS for everything (which it looks like you are).
Source: http://nightwatchjs.org/guide#page-objects
Related
Sitemap Doesn't work
I can't get the site map URL and I can't use the /sitemap.xml URL
How do I fix it??
siteMetadata: {
siteUrl: siteAddress.href, // which is "https://www.example.com/"
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
head: true,
output: `/sitemap.xml`,
}
Have you tried building your project? From the docs:
NOTE: This plugin only generates output when run in production mode! To test your sitemap, run: gatsby build && gatsby serve
In addition, your plugin's options are not valid: head should be createLinkInHead. A full sample with queries should look like:
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/some-other-sitemap.xml`,
createLinkInHead: true,
exclude: [`/category/*`, `/path/to/page`],
query: `
{
wp {
generalSettings {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
}`,
resolveSiteUrl: ({site, allSitePage}) => {
return site.wp.generalSettings.siteUrl
},
serialize: ({ site, allSitePage }) =>
allSitePage.nodes.map(node => {
return {
url: `${site.wp.generalSettings.siteUrl}${node.path}`,
changefreq: `daily`,
priority: 0.7,
}
})
}
}
Alternatively, you can use gatsby-plugin-advanced-sitemap which has more customizable options.
I have a gatsby-theme React application that uses gatsby-source-graphql to fetch the data from my back-end application. I had set the refetchInterval: 20 in my gatsby-config.js file. My gastby-config.js file is as below
module.exports = {
siteMetadata: {
title: 'Gatsby Theme Mytheme',
...
},
pathPrefix: `/gtm`,
plugins: [
{
...
...
{
resolve: `gatsby-source-graphql`,
options: {
fieldName: `cms`,
url: `http://127.0.0.1:7000/api/graphiql`,
typeName: `CMSData`,
refetchInterval: 20,
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
};
When I run the application in the development mode (gatsby develop) I'm able to see (console.log) the changes made in the back-end CMS application after an interval of 20 seconds. But the changes are not able to see/display on the build (gatsby build). Therefore after the build, whatever I change in the backed it is not reflected in my front-end application. So how can I fetch the changes from the back-end application for my a gatsby build dynamically?
The component I use to fetch the back-end GraphQL data is given as
import { useStaticQuery, graphql } from "gatsby";
export function myComponent() {
const cmsMenu = useStaticQuery(graphql`
{
cms {
allMenus {
edges {
node {
menuName
}
}
}
}
}
`)
console.log("CMS menu from MenuProvider", cmsMenu);
}
Following the apple documentation and Branch's documentation here, I have set up a working universal link in my Nativescript Angular (iOS) app. But, how do I parse the link when the app opens?
For example, when someone opens the app from the link, I want to have my app read the link so it can go to the correct page of the app.
There is some helpful code in this answer, but I keep getting errors with it. This could be bc the code is written in vanilla JS and I am not translating it into Angular correctly. The use of "_extends" and "routeUrL" both cause errors for me.
And the Nativescript url-handler plugin does not seem to work without further code.
So, after setting up the universal link, and installing the nativescript url-handler plugin, I have entered the following in app.module.ts:
const Application = require("tns-core-modules/application");
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';
declare var NSUserActivityTypeBrowsingWeb
if (Application.ios) {
const MyDelegate = (function (_super) {
_extends(MyDelegate, _super);
function MyDelegate() {
_super.apply(this, arguments);
}
MyDelegate.prototype.applicationContinueUserActivityRestorationHandler = function (application, userActivity) {
if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
this.routeUrl(userActivity.webpageURL);
}
return true;
};
MyDelegate.ObjCProtocols = [UIApplicationDelegate];
return MyDelegate;
})(UIResponder);
Application.ios.delegate = MyDelegate;
}
...
export class AppModule {
ngOnInit(){
handleOpenURL((appURL: AppURL) => {
console.log('Got the following appURL = ' + appURL);
});
}
}
The trouble seems to be mostly with "_extends" and "_super.apply". For example, I get this error:
'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating '_extends')
EDIT: Note that the nativescript-urlhandler plugin is no longer being updated. Does anyone know how to parse universal links with Nativescript?
I have figured out a method to get this working:
The general idea is to use the iOS App Delegate method: applicationContinueUserActivityRestorationHandler.
The syntax in the Nativescript documentation on app delegates did not work for me. You can view that documentation here.
This appears to work:
--once you have a universal link set up, following documentation like here, and now you want your app to read ("handle") the details of the link that was tapped to open the app:
EDIT: This code sample puts everything in one spot in app.module.ts. However, most of the time its better to move things out of app.module and into separate services. There is sample code for doing that in the discussion here. So the below has working code, but keep in mind it is better to put this code in a separate service.
app.module.ts
declare var UIResponder, UIApplicationDelegate
if (app.ios) {
app.ios.delegate = UIResponder.extend({
applicationContinueUserActivityRestorationHandler: function(application, userActivity) {
if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
let tappedUniversalLink = userActivity.webpageURL
console.log('the universal link url was = ' + tappedUniversalLink)
}
return true;
}
},
{
name: "CustomAppDelegate",
protocols: [UIApplicationDelegate]
});
}
NOTE: to get the NSUserActivity/Application Delegate stuff to work with typescript, I also needed to download the tns-platforms-declarations plugin, and configure the app. So:
$ npm i tns-platforms-declarations
and
references.d.ts
/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
The above code works for me to be able to read the details of the tapped universal link when the link opens the app.
From there, you can determine what you want to do with that information. For example, if you want to navigate to a specific page of your app depending on the details of the universal link, then I have found this to work:
app.module.ts
import { ios, resumeEvent, on as applicationOn, run as applicationRun, ApplicationEventData } from "tns-core-modules/application";
import { Router } from "#angular/router";
let univeralLinkUrl = ''
let hasLinkBeenTapped = false
if (app.ios) {
//code from above, to get value of the universal link
applicationContinueUserActivityRestorationHandler: function(application, userActivity) {
if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
hasLinkBeenTapped = true
universalLinkUrl = userActivity.webpageURL
}
return true;
},
{
name: "CustomAppDelegate",
protocols: [UIApplicationDelegate]
});
}
#ngModule({...})
export class AppModule {
constructor(private router: Router) {
applicationOn(resumeEvent, (args) => {
if (hasLinkBeenTapped === true){
hasLinkBeenTapped = false //set back to false bc if you don't app will save setting of true, and always assume from here out that the universal link has been tapped whenever the app opens
let pageToOpen = //parse universalLinkUrl to get the details of the page you want to go to
this.router.navigate(["pageToOpen"])
} else {
universalLinkUrl = '' //set back to blank
console.log('app is resuming, but universal Link has not been tapped')
}
})
}
}
You can use the nativescript-plugin-universal-links plugin to do just that.
It has support for dealing with an existing app delegate so if you do have another plugin that implements an app delegate, both of them will work.
Here's the usage example from the docs:
import { Component, OnInit } from "#angular/core";
import { registerUniversalLinkCallback } from "nativescript-plugin-universal-links";
#Component({
selector: "my-app",
template: "<page-router-outlet></page-router-outlet>"
})
export class AppComponent {
constructor() {}
ngOnInit() {
registerUniversalLinkCallback(ul => {
// use the router to navigate to the screen
});
}
}
And the callback will receive a ul (universal link) param that looks like this
{
"href": "https://www.example.com/blog?title=welcome",
"origin": "https://www.example.com",
"pathname": "/blog",
"query": {
"title": "welcome"
}
}
Disclaimer: I'm the author of the plugin.
This might be repeated question for you guys but really I didn't get answer yet.
Here is my multi-capabilities definition in protractor config file.
I want to access the deviceName parameter value. How can I do it?
exports.config = {
directConnect:true,
multiCapabilities: [
{
browserName: 'chrome',
'chromeOptions': {
'mobileEmulation': {
'deviceName': 'iPad'
}
}
}
],
Tried under onPrepare but not giving multi-capabilities values
browser.getCapabilities().then(function(c) {
console.log(c.get('deviceName'));
});
Not sure about solving with getCapabilities(), but you should be able to solve this with getProcessedConfig().
getProcessedConfig will return a promise of your entire configuration settings (and a few protractor defaults). So taking your example:
browser.getProcessedConfig().then((c) => {
console.log(c.capabilities.chromeOptions.mobileEmulation.deviceName);
});
You could make console.log(process.env) in the onPrepare block and find what you want.
Try getProcessedConfig()
http://www.protractortest.org/#/api?view=ProtractorBrowser.prototype.getProcessedConfig
Or just plain old stupid:
let device_name = 'iPad'
exports.config = {
directConnect: true,
multiCapabilities: [{
browserName: 'chrome',
chromeOptions: {
mobileEmulation: {
deviceName: device_name
}
}
}],
onPrepare: function () {
console.log('Device name will be', device_name);
}
Fetching device name worked as advised by Gunderson but now I am running into different issue I am unable to access the variable value outside the code block while in onPrepare.
onPrepare: function () {
browser.getProcessedConfig().then(function (c) {
return global.deviceName
c.capabilities.chromeOptions.mobileEmulation.deviceName;
}).then(function () {
console.log("Device Name is:" + global.deviceName);
customDevice = global.deviceName;
}
);
};
customDevice not printing any value.....which is define as global variable on top of the configuration file.
I know might be doing silly mistake in accessing it...:)
I'm using DocPad to generate system documentation. I am including release notes in the format
http://example.com/releases/1.0
http://example.com/releases/1.1
http://example.com/releases/1.2
http://example.com/releases/1.3
I want to include a link which will redirect to the most recent release.
http://example.com/releases/latest
My question: how do I make a link that will redirect to a relative URL based on configuration? I want this to be easily changeable by a non-programmer.
Update: I've added cleanurls into my docpad.js, similar to example below. (see code below). But using "grunt docpad:generate" seems to skip making the redirect (is this an HTML page?). I've a static site. I also confirmed I'm using the latest cleanurls (2.8.1) in my package.json.
Here's my docpad.js
'use strict';
var releases = require('./releases.json'); // list them as a list, backwards: ["1.3", "1.2", "1.1", "1.0"]
var latestRelease = releases.slice(1,2)[0];
module.exports = {
outPath: 'epicenter/docs/',
templateData: {
site: {
swiftype: {
apiKey: 'XXXX',
resultsUrl: '/epicenter/docs/search.html'
},
ga: 'XXXX'
},
},
collections: {
public: function () {
return this.getCollection('documents').findAll({
relativeOutDirPath: /public.*/, isPage: true
});
}
},
plugins: {
cleanurls: {
simpleRedirects: {'/public/releases/latest': '/public/releases/' + latestRelease}
},
lunr: {
resultsTemplate: 'src/partials/teaser.html.eco',
indexes: {
myIndex: {
collection: 'public',
indexFields: [{
name: 'title',
boost: 10
}, {
name: 'body',
boost: 1
}]
}
}
}
}
};
When I run grunt docpad:generate, my pages get generated, but there is an error near the end:
/data/jenkins/workspace/stage-epicenter-docs/docs/docpad/node_modules/docpad-plugin-cleanurls/node_modules/taskgroup/node_modules/ambi/es6/lib/ambi.js:5
export default function ambi (method, ...args) {
^^^^^^
I can't tell if that's the issue preventing this from running but it seems suspicious.
Providing that your configuration is available to the DocPad Configuration File, you can use the redirect abilities of the cleanurls plugin to accomplish this for both dynamic and static environments.
With a docpad.coffee configuration file, it would look something like this:
releases = require('./releases.json') # ['1.0', '1.1', '1.2', '1.3']
latestRelease = releases.slice(-1)[0]
docpadConfig =
plugins:
cleanurls:
simpleRedirects:
'/releases/latest': '/releases/' + latestRelease
module.exports = docpadConfig