how to upload file using watir - ruby

I'm new at automation test, but I want to make automation testing upload a photo using watir but the photo can't uploaded and not show any error, I'm using ruby v2.7.4p191 and watir v.6.19.1.
this is html:
<div class="file-attachments">
</div>
<div class="dropzonePreview" id="dropzonePreview">
</div>
<div class="dropzoneAdd dz-clickable" id="dropzoneAdd">
<div class="addText">
<div class="fa fa-cloud-upload"></div>
Drop file to attach, or
<span style="color:#22B5E7; text-decoration: underline">
browse
</span>
</div>
<div class="addText-detail">
max size 10 MB/file
</div>
</div>
<div class="dropzoneMaxFileReached" id="dropzoneMaxFileReached" style="display:none">
Maximum upload file has been reached
</div>
this is ruby code
#browser.file_field.set "C:banana.jpg"

Related

xpath: How to combine multiple conditions on different axes

I try to extract all links based on these three conditions:
Must be part of <div data-test="cond1">
Must have a <a href="..." class="cond2">
Must not have a <img src="..." class="cond3">
The result should be "/product/1234".
<div data-test="test1">
<div>
<div data-test="cond1">
Link 1
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-test="test2">
<div>
<div data-test="cond1">
Link 2
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
<img src="bild.jpg" class="cond3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm able to extract the links with the following xpath query.
//div[starts-with(#data-test,"cond")]/a[starts-with(#class,"cond")]/#href
(I know the first part is not really neccessary. But better safe than sorry.)
But I'm still struggling with excluding the links containing an descendant img tag and how to add it to the query above.
This should do what you want:
//div[#data-test="cond1" and not(.//img[#class="cond3"])]
/a[#class="cond2"]
/#href
/product/1234

How can I display vue.js data in blade

I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component

New to Laravel, trying to integrate Square Payment Form

I've been following the instructions on Square's website.
I've got all the code I need plugged into my application as shown on square, but the asset('js/square.js') call didn't find the file for some reason. So, I just added the script to the end of the resources/js/app.js file, doesn't seem to have any errors but the form doesn't look right..
<form id="nonce-form" novalidate action="PATH/TO/PAYMENT/PROCESSING/PAGE" method="post">
#csrf
<fieldset>
<span class="label">Card Number</span>
<div id="sq-card-number"></div>
<div class="third">
<span class="label">Expiration</span>
<div id="sq-expiration-date"></div>
</div>
<div class="third">
<span class="label">CVV</span>
<div id="sq-cvv"></div>
</div>
<div class="third">
<span class="label">Postal</span>
<div id="sq-postal-code"></div>
</div>
</fieldset>
<button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">Pay $1.00</button>
<div id="error"></div>
<!--
After a nonce is generated it will be assigned to this hidden input field.
-->
<input type="hidden" id="card-nonce" name="nonce">
</form>

"Could not find the file list container in the template" error

I am getting message "Could not find the file list container in the template" appearing in my Javascript debug console when using fine uploader.
Here is a jsfiddle example of the problem occurring.
http://jsfiddle.net/Lu82ba9L/1/
The code from the example is repeated here
<!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js -->
$(document).ready(function () {
$("#fine-uploader").fineUploader({
debug: true,
template: 'qq-template-bootstrap',
request: {
endpoint: "/my-endpoint"
}
});
});
<script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector">
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-button-selector qq-upload-drop-area-selector drag-drop-area">
<div>Drag and drop files here or click to upload</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-list-selector" >
<div class="panel panel-default" >
<div class="panel-body" >
<div class="qq-progress-bar-container-selector progress">
<div class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" />
</div><!-- close panel-body -->
</div><!-- close panel -->
</div>
</div>
</div>
</script>
<h1>Fine Uploader Test</h1>
<div id="fine-uploader"></div>
Just for additional information that may be helpful, I have a working version here. http://jsfiddle.net/61motjed/2/ .In this version here I have moved the "div.qq-upload-list-selector" element to a different position in the DOM (however, this is not the DOM structure I want). It is also unclear to me why the first example fails but the 2nd example is working.
Your template is not valid. The template must contain a top-level element with a CSS class of "qq-uploader-selector". This element must contain all other elements in your template. Simply wrapping the contents of your template in an element with this class should fix your issue.

How to add images in codeigniter using Bootstrap

I have started designing a website using codeigniter tutorial from tuts plus and encountered problem on how to add carousel images using Bootstrap in codeigniter. My images are found at /images/...
How can I solve this problem?
<div class="intro-block">
<div class="container">
<div class="row">
<div class="span3">
<div class=" t">
</div>
</div>
<div class="span9">
<div id="artcoursel" class="carousel slide">
<div class="carousel-inner">
<img src= "images/test-1.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
Try this.
<img src=<?php echo base_url('images/test-1.png')?>>

Resources