I'm trying to set up E2E testing of a Vue application with Cypress.
I can log into the app with my regular Chrome browser. However, the browser opened up by Chrome won't let me log in. Both the automatic login via Cypress and manual login fail.
Is there a setting I'm missing?
My Vue element:
<template>
<div class="d-flex justify-content-center">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Username</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input v-model="username" class="input" type="text"
placeholder="Your username">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Password</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input v-model="password" class="input" type="password"
placeholder="Your password">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<!-- Left empty for spacing -->
</div>
<div class="field-body">
<div class="field">
<div class="control text-center">
<button v-on:click="login()" class="button is-primary">
Login
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
My test file:
describe('Logging in', () => {
it('Logs in as admin', () => {
cy.visit('/')
.get('input[type="text"]')
.type('Admin')
.get('input[type="password"]')
.type('Pass1234')
.get('button').click()
.location().should((loc) => {
expect(loc.pathname).to.eq('/dashboard-main/dashboard');
})
})
})
Update: some suggestions here: https://github.com/cypress-io/cypress/issues/1759#issuecomment-391729559
Do you get to see anything during the e2e test when it runs? Like Cypress typing in that fields?
Besides the fact that I wouldn't use very generic locators, I would stop in the .click() and then check the new path with cy.url()
Related
I use Ckeditor 5 classic in textarea in Laravel Liveware, the form will not be submitted.
How can I solve this problem?
This form is bootstrap modal form. when i use ckeditor code in app.blade.php then the form are not submitted.
** Form Code**
<form wire:submit.prevent="createAppointment">
<div class="modal-body">
<div class="form-group">
<label for="client_id">Client</label>
<select wire:model.defer="state.client_id" id="client_id" class="form-control">
#foreach($clients as $client)
<option value="{{$client->id}}">{{$client->name}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="">Date</label>
<div wire:ignore class="input-group date" id="datetimepicker4" data-target-input="nearest" data-appointmentdate = "#this">
<input type="text" class="form-control datetimepicker-input" id="appointmentDateInput" data-target="#datetimepicker4" />
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<label for="">Time</label>
<div class="input-group date" id="datetimepicker3" data-target-input="nearest" data-appointmenttime = "#this">
<input type="text" id="appointmentTimeInput" class="form-control datetimepicker-input" data-target="#datetimepicker3" />
<div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
<div class="input-group-text"><i class="far fa-clock"></i></div>
</div>
</div>
</div>
<div class="form-group" wire:ignore>
<label for="note">Note</label>
<textarea wire.model.defer="state.note" id="note" class="form-control" cols="30" rows="4"></textarea>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
<i class="mr-1 fa fa-times"></i>
Cancel
</button>
<button type="submit" id="submit" class="btn btn-primary">
<i class="mr-1 fa fa-save"></i>
{{ $showEditModal == true ? "Update" : "Save" }}
</button>
</div>
</form>
javascript Code
<script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#note' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
when i click edit button (i used modal bootstrap) all value exist except textarea with summernote.
if you input something(in summernote) and cancel it ,your value doesn't disappear ... it should be clear .
forgive me, my english so bad .
here is my modal form :
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Formulir Berita</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="id_berita"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-2">Tanggal penulisan</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input name="tgl" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text">
<span class="help-block"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Judul</label>
<div class="col-md-9">
<input name="judul" placeholder="Judul" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Penulis</label>
<div class="col-md-9">
<input name="penulis" placeholder="Penulis" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group" id="photo-preview">
<label class="control-label col-md-2">Gambar</label>
<div class="col-md-4">
(Tidak ada gambar)
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" id="label-photo">Unggah Foto </label>
<div class="col-md-7">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<i class="fa fa-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file">
<span class="fileupload-exists">Ganti Foto</span>
<span class="fileupload-new">Pilih File</span>
<input name="gambar" type="file" />
</span>
<span class="help-block"></span>
Remove
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Isi</label>
<div class="col-md-9">
<textarea name="isi" class="form-control" id="summernote" >
</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Simpan</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
</div>
</div>
</div>
</div>
i 've been trying some code :
$('#summernote').summernote('code');
$('#summernote').summernote('reset');// and for resetting modal while Add Data
it doesn't happen anything
my ajax function :
function edit_berita(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('sistem/berita/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data){
// $('#summernote').summernote('code');
$('[name="id_berita"]').val(data.id_berita);
$('[name="tgl"]').datepicker('update',data.tgl);
$('[name="judul"]').val(data.judul);
$('[name="isi"]').val(data.isi);
$('[name="penulis"]').val(data.penulis);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit data'); // Set title to Bootstrap modal title
$('#photo-preview').show(); // show photo preview modal
if(data.gambar)
{
$('#label-photo').text(''); // label photo upload
$('#photo-preview div').html('<img src="'+base_url+'upload/berita/'+data.gambar+'" class="img-responsive" >'); // show photo
$('#photo-preview div').append('<input type="checkbox" name="remove_photo" value="'+data.gambar+'"/> Remove photo when saving'); // remove photo
}
else
{
$('#label-photo').text(''); // label photo upload
$('#photo-preview div').text('(Tidak ada gambar)');
}
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
Text Area doesnot have value. jQuery .html() works in this case
$("textarea#summernote").html(data.isi);
Try to modify the summernote line like this :
$('#summernote').summernote('code', data.isi);
And to clear the content :
$('#summernote').summernote('code', '');
Please try this:
$("textarea#summernote").val(data.isi);
$( '[name="isi"]' ).val(data.isi);
$( '[name="isi"]' ).summernote();
i am using Ckeditor for blog posting in my project when i submit the form nothing i am get in controller can any one suggest me solution for that.
my view is looking like
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Post</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ route('store-post') }}">
{{ csrf_field() }}
<div class="form-group">
<label for="category_id" class="col-md-2 control-label">Select Categories</label>
<div class="col-md-8">
<select class="form-control" id="category_id" name="category_id">
#foreach($categories as $category)
<option value="{{$category->url_name}}">
{{$category->category_name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-2 control-label">Post Title</label>
<div class="col-md-8">
<input id="post_title" type="text" class="form-control" name="post_title" value="{{ old('post_title') }}">
</div>
</div>
<div class="form-group">
<label for="post_content" class="col-md-2 control-label">Post Description</label>
<div class="col-md-8">
<textarea id="post_content" rows="10" cols="60" class="span8" placeholder="Image Title Goes Here" name="post_content"></textarea>
</div>
</div>
<div class="form-group">
<label for="p_url" class="col-md-2 control-label">Post Url</label>
<div class="col-md-8">
<input id="p_url" type="text" class="form-control" name="p_url" value="{{ old('p_url') }}">
</div>
</div>
<div class="form-group">
<label for="p_title" class="col-md-2 control-label">Meta Title</label>
<div class="col-md-8">
<input id="p_title" type="text" class="form-control" name="p_title" value="{{ old('p_title') }}">
</div>
</div>
<div class="form-group">
<label for="p_keyword" class="col-md-2 control-label">Meta Keyword</label>
<div class="col-md-8">
<input id="p_keyword" type="text" class="form-control" name="p_keyword" value="{{ old('p_keyword') }}">
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-2 control-label">Meta Description</label>
<div class="col-md-8">
<textarea class="form-control" id="p_mdesc" name="p_mdesc" rows="3">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</div>
<!--Error start-->
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<!--error ends-->
</form>
</div>
</div>
</div>
</div>
</div>
my controller code is
public function store(Request $request){
/*$this->validate($request, [
'category_id' => 'required',
'post_title' => 'required',
//'post_content' => 'required',
'p_url' => 'required',
'p_title' => 'required',
'p_keyword' => 'required',
'p_mdesc' => 'required',
]);*/
$post=new Post;
echo $post_content=$request->input('post_content');
}
in previous project ie designed in CI i just use
$tc=$this->input->post('tc'); in controller for getting the Ckeditor value but in laravel i am not sure how to get it done.
Your view contain 2 name attribute for the post_content field (textarea). Please check.
You can do it like this -
{!! Form::textarea('tc', $tc,array('required', 'class'=>'form-control', placeholder'=>'Your message')) !!}
and then you will have to initialise it
$(document).ready(function () {
CKEDITOR.replace( 'tc' );
});
The documentation has clear examples.
In your Blade you should add ckeditor like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
So the javascript code triggers a replace of a textarea to the editor
Now for the retrieving data part
<script>
var data = CKEDITOR.instances.editor1.getData();
// Your code to save "data", usually through Ajax.
</script>
You need to create an endpoint if you want to send this data indeed trough Ajax. Don't forget to add a CSRF token
As mentioned by #user3888958,
<textarea name="tc" id="post_content" rows="10" cols="60"
class="span8" placeholder="Image Title Goes Here" name="post_content">
the textarea has two name attribute.
You could access the textarea content using the name attribute, remove any one name attribute and pass that in as a parameter to the request
$request->input('tc'); // OR
$request->input('post_content');
and to access the value of
<textarea class="form-control" id="p_mdesc" name="p_mdesc" rows="3">
</textarea>
you could access it using the name
$request->input('p_mdesc');
I have a problem with FormValidation to validate a form in multi-tab (Bootstrap theme).When I click on submit button in #tab-1, formValidation work correctly. but when I change to #tab-2 or #tab-3, field validation in #tab-1 don't work and submit form without validation.
<form id="newstext" method="post" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-message="This value is not valid"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><i class="green ace-icon fa fa-home bigger-120"></i>tab-1</li>
<li><i class="red ace-icon fa fa-folder bigger-120"></i>tab-2</li>
<li><i class="blue ace-icon fa fa-exchange bigger-120"></i>tab-3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">title *</label>
<input id="title" name="title" type="text" placeholder="" class="form-control"
data-fv-notempty="true"
data-fv-notempty-message="The title is required" />
</div>
<div class="form-group">
<label class="control-label">abstract </label>
<input id="abst" name="abst" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">name</label>
<input id="namee" name="namee" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">show</label>
<input name="show_callme" value="1" id="show_callme" type="checkbox">Ok
<input name="show_callme" value="1" id="shows" type="checkbox">Bold
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
Please see my code in Codepen
This example might be helpful: formvalidation.io/examples/bootstrap-tab
JQuery FormValidation Has solved the problem Validation
That by replacing the jquery, validation between tabs work
You can add "ignore" in validate function, this worked fine with me
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});
I am trying to log some input values into an array via jquery and then use those to run a method server side and get the data returned as JSON.
The HTML looks like this,
<div class="segment">
<div class="label">
<label>Choose region: </label>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Nationwide]" id="inp_Nationwide">
</div>
<div class="label ">
<label for="inp_Nationwide">Nationwide</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Lancashire]" id="inp_Lancashire">
</div>
<div class="label ">
<label for="inp_Lancashire">Lancashire</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
</div>
<div class="label ">
<label for="inp_West_Yorkshire">West Yorkshire</label>
</div>
<div class="s"> </div>
</div>
<div class="s"> </div>
</div>
I have this javascript the detect whether the items are checked are not
if($('input.radio:checked')){
}
What I dont know is how to get the values of the input into an array so I can then send the information through AJAX to my controller. Can anyone help me?
You can use jQuery's each() function.
$('input.radio:checked').each(function() {
//put each of the selected check boxes into an array
});
You need to serialize your input with - serialize()
var data = $('#MYFORM').serialize();