I am automating a data capture form.
The first element of this form is an image file upload control & I'm uploading a 5KB image.
But after this step, the test executes the next step which is writing a text into a textbox & then it halts for nearly 30 seconds.
How to reduce this un-necessary wait?
test('Test 1', async t => {
await listingPage.uploadImage();
await listingPage.listAnItem();
..
Upload image code
async uploadImage() {
await t.setFilesToUpload(this.imageInput, ['../../uploads/photo02.jpg']);
}
** Data entry code block **
async listAnItem() {
await t
.typeText(Selector('#description'), this.DESCRIPTION) /* --> Application is slowing after this step */
.click(this.categorySelect)
.click(Selector('#react-select-2-option-0-0'))
.testcaferc.json file
{
"browsers": [ "chrome", "safari" ],
"remoteChromeVersion": "80",
"src": "specs",
"reporter": [
{
"name": "spec"
}
],
"speed": 1,
"debugOnFail": false,
"skipJsErrors": true,
"selectorTimeout": 20000,
"assertionTimeout": 20000,
"pageLoadTimeout": 8000
}
DOM Snippet of file-upload
<input aria-describedby="error__images" aria-label="Upload an image" tabindex="0" type="file" multiple="" accept="image/jpeg, image/png" data-testid="imageInput" class="ImageInputstyles__Input-sc-2l692w-7 aosWu">
The issue itself was not due to the Upload files control.
Issue was occuring, due to a drop-box, (after uploading file), which was dynamically updating another drop-box that had values populated dynamically based on the value selected in the first drop-down.
Rewriting the drop-down operation something like below resolved the issue:
async fillSubCategoryFields(catType = 'CAT_NAME') {
await t
.click(this.categorySelect, { timeout: 50 })
.click(Selector('.listingSelect__option').withText(catType));
}
Related
Setup
"workbox-cdn": "^5.1.4",
"nuxt": "^2.15.2"
Context
My app, Pictalk, let users save and get pictograms. So basically every user has a custom set of pictograms. For now, it works only online but I want to implement offline-mode.
Technical Details
I display all my pictograms with the html <img .../> tag.
Every time I load a new pictogram I do so:
created(){
if(navigator.onLine){
caches.open('pictos').then((cache) => {
cache.add(this.collection.path)
.then(() => {})
.catch((err)=> {console.log(err)})
});
}
},
Here is a screenshot of the Cache Storage :
As we see the URL is correct and the requests are cached correctly.
Problem
The <img .../> tag doesn't use the workbox cache I created.
Found out the solution here and here.
Here is the files I had to modify in order to make it work :
First, my <img/> tags had to use the crossorigin="anonymous" method :
<img class="image" style :src="path" crossorigin="anonymous"/>
Once the <img/> tags are more flexible with their origin we can start building our custom registered workbox route:
// plugins/workboxConfig.js
workbox.routing.registerRoute(
new RegExp('https://myapi\\.somewhere\\.com/pictalk/image/.*\\.(png|jpg|jpeg)'),
new workbox.strategies.CacheFirst({
cacheName: 'pictos',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({ statuses: [200] }),
new workbox.rangeRequests.RangeRequestsPlugin(),
],
matchOptions: {
ignoreSearch: true,
ignoreVary: true
}
}),
);
I had to declare this file here in the nuxtjs.config.js :
pwa: {
workbox: {
cachingExtensions: '#/plugins/workboxConfig.js'
}
}
I'm practicing building a Hybrid Mobile app with Quasar, Vue and Vuex.
I've successfully added my form input fields to my Vuex store but I don't know how to upload a file, in this case a photo, within my Form.
Here is my q-file input from my form, with the data.
<q-file
v-model="mealToSubmit.photo"
label="Upload File"
outlined
>
Data:
data () {
return {
mealToSubmit: {
name: '',
description: '',
photo: null,
grams: '',
calories: '',
visible: false
}
}
}
After I fill in the Form and click Save, all of the data appears on the page except for the photo I selected. In the console I get a 404 error:
404 http://localhost:8080/img/null 404 (Not Found)
I can see the problem here is that it's displaying null, instead of the name of the photo I upload, which is why I'm getting a 404 error.
Here are two screenshots, one of me filling in the Form and second is the data being displayed properly except for the photo, with the error message in the console.
NOTE:
Just to add to this, I've uploaded files before using Vue js and Bootstrap-Vue. I add an #change event on the File input with a v-model like this:
<b-form-group label="Upload Profile Photo (optional)" label-for="photo_id">
<b-form-file
v-model="profileData.photo_id"
id="photo_id"
placeholder="Choose a file..."
#change="attachImage"
accept=".jpg, .jpeg, .png"
></b-form-file>
</b-form-group>
Than in the Methods{}:
methods: {
attachImage(evt) {
const file = evt.target.files[0];
let reader = new FileReader();
reader.addEventListener('load', function() {
}.bind(this), false);
reader.readAsDataURL(file);
},
}
And then I bind the data using FormData(); and send it to the backend. This approach isn't working with the Quasar file upload input and the code that I have above.
I got it now:
<q-file
#input="getFile"
label="Upload file"
/>
methods: {
getFile(file) {
// file is in the file variable
this.mealToSubmit.photo = file
}
}
I'm using NightwatchJS to test a page with an embedded iFrame. The test opens the page, waits for the iframe to be present. All test steps work so far, but the iFrame's content tells me that the browser can not render embedded iframes.
Nightwatch Config (nightwatch.conf.js)
"chrome" : {
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true,
"nativeElements": true
}
},
Test Code
.waitForElementVisible('//iframe[#id = "botframe"]')
.element('xpath', '//iframe[#id = "botframe"]', (r) => console.log(r))
.assert.containsText('//iframe[#id = "botframe"]', 'Hello')
Output
✔ Element <//iframe[#id = "botframe"]> was visible after 61 milliseconds.
{ sessionId: '76685e966809e760c639d589ba318693',
status: 0,
value: { ELEMENT: '0.5426473824985356-1' } }
✖ Testing if element <//iframe[#id = "botframe"]> contains text: "Hallo" in 1000 ms. - expected "Hallo" but got: "<br><p>Da Ihr Browser keine eingebetteten Frames anzeigen kann...
You need to switch to the frame in order to check it’s contents, like
.frame(‘botframe’)
After you have finished checking the frame and want to return to your primary html content:
.frame(0)
// or
.frame(null)
//or
.frame()
Will return you to the original frame.
I use Selenium to test web app behaviour on file upload page.
The goal of test is to check application validations on file selection.
I use webDriver.SendKeys (C#) on file input to simulate file upload, file is selected successfully, but fileInput.files[0].size (js) is always 0 (or undefined?) and app shows error "Do not upload empty files". File size is correct on manual testing.
Any suggestions, on how to solve the problem?
UPDATE Code details:
HTML
<input id="file-path" type="file" data-bind="attr: { accept: mimeTypes }, event: { change: onFileSelect }" />
<small id="file-path-error" class="field-validation-error" data-bind="validationMessage: file"></small>
JS (file edit model uses knockout)
this.file = ko.observable().extend({
validation: [
{
validator: function(file) {
// valid if no file or file size < 5Mb
return !file || file.size < 5242880;
},
message: 'File size should be less than 5Mb'
}, {
validator: function(file) {
// valid if no file or file size > 0
return !file || file.size > 0;
},
message: 'Do not upload empty files'
}
]
});
this.onFileSelect = function(model, event) {
var fileInput;
fileInput = event.target;
if ((fileInput.files != null) && fileInput.files.length > 0) {
_this.file(fileInput.files[0]);
} else {
_this.file(null);
}
};
C#
webDriver.FindElement(By.Id("file-path")).SendKeys("C:\testFile.txt");
Assert.AreEqual(webDriver.FindElement(By.Id("file-path-error").Text,"");
Assertion always fails because file-path-error contains "Do not upload empty files" - that is the problem.
I was misleaded by answers on How to automate file upload in Internet Explorer using Selenium?
Discusstion on How to set a value to a file input in HTML? says that actually we can not upload files programmatically.
So there was no sence in expecting decent behaviour for such test.
i am working on Extjs4 file upload control. i have view with file upload control as-
Ext.define('Balaee.view.kp.dnycontent.Content',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.kp.dnycontent.ContentView'
],
id:'ContentId',
alias:'widget.Content',
enctype : 'multipart/form-data',
title:'This day in a history',
items:[
{
xtype: 'fileuploadfield',
hideLabel: true,
emptyText: 'Select a file to upload...',
//inputType: 'file',
id: 'upfile',
width: 220
}],
buttons: [{
xtype : 'button',
fieldlabel:'upload',
action:'upload',
name:'upload',
text: 'Upload',
formBind:'true'
}]
});
And corresponding action in controller is-
getUpload : function() {
var file10 = Ext.getCmp('ContentId').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = function(oFREvent) {
fileobj=oFREvent.target.result;
console.log(oFREvent.target.result);
};
}
});
So above controller's function is retriving uploaded file and displaying it in encoded format inside reader's onload function. i.e. "console.log(oFREvent.target.result);" line is displaying uploaded file's data in encoded format in console. I need to send this file to server side. So i am passing above fileobj as parameter to store as-
var storeObj=this.getStore('kp.DnycontentStore');
storeObj.load({
params:{
data:fileobj
},
callback: function(records,operation,success){
console.log("send");
},
scope:this
})
But its showing fileobj as undefined outside reader.onload function. So how to send this file along with its contents to server side? Is there any other way to get uploaded file in controller and send it to server. Please can someone guide me.
I dont know how to handle fileuplaod on php side, but the return response from the server needs to be text/html encoded
See the docs on this:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
also example PHP fileupload script:
http://www.w3schools.com/php/php_file_upload.asp