Empty Screenshots/ Element not found during headless chrome testing - protractor

I'm quite new to automation testing in general and I'm only starting to pick up the protractor testing framework, so bear with me if the way I'm phrasing some terms doesn't seem right (or leaving out crucial information).
I'm currently trying to write automation testing for an Angular application with the Protractor Framework/ Cucumber Framework. The tests are running fine outside the headless browser mode but they seem to be failing in headless. Throwing the error:
NoSuchElementError: No element found using locator
I've searched a ton online but I can't seem to find a proper solution
I've tried:
Setting the window size as follows:
args: [ "--headless", "--disable-gpu", "--window-size=1980,1080" ]
//also tried with --no-sandbox, --start-maximized
Looking at the Angular lifecycle method (if this is even relevant)
These are my chrome settings:
chromeOptions: {
useAutomationExtension: false,
args: [ "--headless", "--disable-gpu", "--window-size=1980,1080" ]
}
Screenshots taken are empty (white blank screenshots, when tested in normal mode (i.e. not headless) screenshots show the view of the webpage)
NoSuchElementError - expecting to be able to find the element given it works in the non-headless mode.

Related

nuxt 3 : generate and host a small pwa

I'm testing Nuxt 3 (RC for now), and really love it.
I made a very small front-end application ( no backend, 3 pages, a complex form with some formulas to display some results ).
it works nice locally, there is nothing related to backend, so
I obviously could used only Vue,
but for testing purpose and to go further, I would like to generate a PWA, host it on a dev server ( in a subfolder ) and try to install it on my phone.
It seems nuxt-pwa is not still compatible with nuxt 3,
according to this issue, I've installed kevinmarrec/nuxt-pwa-module,
It works partially ( well.. favion and icons is generated locally )
but I don't know how to configure nuxt.config.js:
the router didn't match the subfolder,
no styles or reactivity is working, I got only my html displayed
I don't even know which command to use : npm run build or generate
I've looked a couple of hours, unsuccesfully, so is there someone knowing some good resources explaining how to turn a Nuxt 3 app into PWA and solve my silly problems
thanks :)
Hey sorry for the late reply, but the API is similar to that of nuxt/pwa meaning configuration from nuxt/pwa will most likely work with the module. To confirm try adding the following pwa config to your nuxt.config.js and check if it works
meta: {
name: 'Demo Site',
description: "Some juicy description",
theme_color: "#dddddd",
},
Note: the name property changes the title of the page. The description adds a meta description tag and the theme_color adds a meta theme-color tag
You can find out more from https://pwa.nuxtjs.org/meta
Any of the commands build or generate will work, but preferably build

Testing Flutter apps with Cypress

Is it possible to test Flutter applications using the Cypress framework instead of using the built-in testing components that Flutter provides? If so, what are the pros & cons of both for Flutter testing if I know Cypress well?
Yes, technically, it's possible.
Here's a spec that passes with the basic flutter counter app:
describe('Counter app', () => {
beforeEach(() => {
cy.visit('http://localhost:_example_port_/#/')
cy.get('flt-semantics-placeholder').click({force: true})
})
it('Increments on button press', ()=>{
cy.get(`[aria-label="0"]`)
cy.get(`[aria-label="Increment"]`).click()
cy.get(`[aria-label="1"]`)
})
})
To explain, if you enable semantics by clicking on the hidden 'flt-semantic-placeholder' element, flutter adds a semantics layer used by screen readers. Widgets with tooltips and text are automatically assigned aria-labels, which Cypress can use to find and click on elements. (You can get more control over these labels using a Semantics Widget.)
I found this worked for the canvas renderer, but it crashed when I tried to run multiple test cases in the same run. So, use the html renderer, ie run flutter for the test with something like:
flutter run -d chrome --web-renderer html --web-port 3443
Okay, so clicking a button is pretty straightforward. What about other interactions?
Inputing text into a field:
Pretty straightforward. See this example.
Simulating a scroll event:
In short, no solution yet. See this markdown.
Simulating drag and drop:
Not likely. See this markdown.
Now for the pros and cons...
Pros:
Cypress is more user friendly than the integration testing flutter provides. Being able to easily hot reload tests, and being able to click around and inspect a live state of a failing test are nice features.
Cons:
Can't (yet) simulate scroll or drag.
Flutter web isn't too performant, and in particular the first load takes a long time. Tests are slow running.
Nothing indicates either the Flutter team or the Cypress team have any plans to support testing Flutter with Cypress.
As of this posting, no online guides or articles for testing Flutter with Cypress.
See also:
What are the tags, <flt-*> generated by Flutter for Web?
https://www.didierboelens.com/2018/07/semantics/

Sweetalert: e2e testing using Protractor

I am trying to test my web application which uses SweetAlert. I am using Protractor for e2e testing.
When I tried selecting an element using
var textElement = element(by.id("newWbName"));
protractor goes into an infinite loop, saying
W/element - more than one element found for locator By(css selector, *[id="newWbName"]) - the first result will be used
as seen here, even though there is only one id with newWbName.
I am wondering if there is anything in how sweet alert renders the alert that is causing this issue? The selectors work fine when I use them on the rest of the page. Any help is really appreciated.

Get WebdriverIO multi-remote to work with Cucumber BDD

I am able to start multiple browser sessions in a single test using WebDriverIO's multiremote with mocha.
Next I'm trying to get WebDriverIO multiremote work with Cucumber BDD. My feature definition is simply to open a browser session and navigate to a url.
Here's my simple WDIO
Problem - the browser opens up but navigation does not occur. I have tried to enable the debugger and observe node-inspector but hasn't helped. What am I missing? Thanks for all the help.
My goal was to conduct multi-user scenario based testing through BDD. Although I haven't been able to resolve this directly via WebDriverIO I found Chimp (which uses WebDriverIO underneath) has its own flavour of session based automation.
Chimp's multi-browser testing does exactly what I wanted. Problem solved!
I'm able to write scenarios such as this without explicitly switching the user context.
Scenario: Able to browse independently
Given Alice goes to "/features"
And Bob go to "/bugs"
Then Alice sees "10" features
And Bob sees "1" bugs

Unable to Open new browser after each scenario in Cucumber-Protractor

I had automated all my scenarios using cucumber-protractor framework. All this scenarios run fine when executed individually i.e. closes the browser once scenario is complete but when ran together I am unable to open new browser window after each scenario. It just continues in same browser. Due to SSO login, I have to restart browser after each scenario.
I tried using maxSession, maxInstance in protractor but of no help. Though maxIntance opens new browser, it doesn't close old one and neither passes control to new one. I tried using getWindowHandler as well but that also didn't worked.
Any help is greatly appreciated as I am stuck on this for long time.
It seems juliemr answers your question:
tests are sharded by file, not by scenario, so you'll need to split the scenarios into separate files.
https://github.com/angular/protractor/issues/864#issuecomment-45571006
So you'll need to split the scenarios into separate feature files and, if desired, set maxInstances to however many you want to run at once. For example:
capabilities: {
'browserName': 'chrome',
'shardTestFiles': true,
'maxInstances': 10
}
Add a hook after each scenario to close the browser:
this.After(function(scenario, done) {
this.quit(done);
});