DDEV DDEV friends - community presentations, 15 Apr 2020

Previous Meeting

⏯

youtube image

►

From YouTube: How to test a website from scratch in 1 hour PHP Tutorial PhpStorm

Description

Testing a webdesign with Codeception is very powerful. In this PHP Codeception tutorial I show how to test ecommerce components in a Sulu Symfony framework CMS application. There are tests for a product slider as Twig snippet in an article bundle. We check the properties like the title and alt tag on the image for the SEO frindley commerce shop application. The second test is about an article overview page and the paging. This is a full PHP cource for absolute beginners.

How to build a website from scratch in 2 hours - PHP Tutorial Sulu CMS PhpStorm best practice DDEV
https://youtu.be/9vGdmI8zz0s
There are live coding tutorial videos
Part 2: Codeception tutorial - Best practice with Symfony 4, DDEV and SULUCMS
https://youtu.be/pxBr_sp5gWk
Gitlab Pipeline example docker workflow for PHP projects with Symfony, PHPStan, Captain Hook in Sulu
https://youtu.be/nOtTASBwV9Q

This Codeception testing tutorial video shows a live coding development. You can see my actual work on the project. I can also help you with testing in your projects. I build "Testify" - a webdevelopment agency to build tests for you. In the next week this project will be in my focus.
https://testify.nevercodealone.de/about

The gist for the Xdebug environment vars on the ZSH command line
https://gist.github.com/nevercodealone/175b96e565cb97fe16ec690d0b72245c

So here is the a Open Source GitHub project with the Sulu CMS. Please check it out and give us feedback
https://github.com/nevercodealone/basesulu

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Our NCA Event Highlights & Live Sessions:

https://www.youtube.com/watch?v=EJSGme-kH8M&list=PLKrKzhBjw2Y-d1-bxY1yQZG-mcRMQHue1

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Here you can find our social media channels:

► Twitter: https://twitter.com/nevercodealone
► Instagram: https://www.instagram.com/nevercodealone/
► LinkedIn: https://www.linkedin.com/company/never-code-alone/
► Facebook: https://www.facebook.com/nevercodealone

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

These are our websites:

► Never Code Alone offers free and commercial live coding events and advanced PHP courses and supports social projects https://nevercodealone.de

► TESTIFY - Website Testing Agency with Cypress.IO and Codeception Testing Framework https://testify.team/

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

You want to support Never Code Alone?
Then feel free to leave us a subscription and write your questions and/or suggestions in the comments.

Thanks for watching!
I hope you enjoyed the video.

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Contact: roland@nevercodealone.de

A

Youtube how to test hello friends of software entertainment, today, I will show you how I do a conception.

A

Acceptance test for an e-commerce project. in this video. We will check our product slider,.

A

A product overview and product detailed view., so at first just let us run a single.

A

Test vendor /bin concept run acceptance --steps.. This shows us the steps here on.

A

The terminal and html will generate a report for us.. I just press enter,.

A

I come to my local page, scroll down and check here on the footer that I can.

A

See an imprint., and I also will check that the href contains the string “/imprint”.

A

We can open with google chrome our report, and now we will see the same here on our.

A

Report., I am on page start page,. I wait for element footer,, I scroll to footer,.

A

I see imprint and read from the attribute I grab attribute from the link the href.

A

And the link contains “/imprint” here on my link., so the green test is okay.. Now a.

A

Short demonstration of what it will look like, when a test fails,, so that you can.

A

See all the features of conception, we have here. our test in our acceptance.

A

Folder navigation footer- and we will see here that we can just add a simple testify. Here.

A

And now our test will fail.. I put this bit up. Later.

A

Our tests fail, because we don't see the word “testify” on the href and when we will check our.

A

Report. the report will give me a screenshot of the actual page and also will give me the.

A

Full html snapshot here that I can open and now I can see here my html., and this also will have.

A

A nice auto completion here., so this is really cool to debug things in different environments,.

A

Because every time we got a screenshot and my html to debug it here., okay, let's fix.

A

The test back again. now we are green. time to check out the application.. This is maybe.

A

One of the most unnecessary tests that has ever been written in software development, history,.

A

Because this is super static code in a twig file., I just wrote a twig file that the imprint has to.

A

Go to the imprint here., but for today we want to do something on our articles.. Let me introduce.

A

You to this webpage. here. This is a new page with a solution as in combination with the.

A

Article bundle to bring here used cars.. These are the used cars here and we have here three.

A

Features on the page that we want to test today.. The first is here an article slider.. This is on.

A

The start page and this article slider, has some features on it.. We will see this later.

A

In detail., the next is a detailed page.. The detail page is actually not ready and finished,.

A

But we can test a few things and the third page that I want to test and what is important for.

A

Me is the article overview page.. What is here? we have here, our content., I haven't implemented.

A

The search and filters. here so far,, but we can check the columns and the pagination.. These are.

A

Important features for me and yeah: let's start with this., so back on the startpage.

A

We will check here our slider.. What is a multi slider?? The first thing is that the slider has.

A

Items., I think this is a really simple test and it will show that there are items here.

A

What items are there and what are displayed on my front? End.? Okay, I go to the terminal and now.

A

I say /bin/vendor/codecept. when you just press enter, you have here, the commands from conception.

A

And you can say: okay, please generate a test in the acceptance suite,. What is called slider.

A

We have different slides here and we have here our startpage.. I think it's an article and now we have.

A

A new codeception test file., I can open it now in phpstorm,. Let me check this out, here. Let's open.

A

The test here in phpstorm. here is a little fix on the namespace, and then we have here our first.

A

Test,, what is an actual class., where we have the full power of php, that we want to use here. here.

A

Is a function that is made before every test. in this class? Every public function is a test.. You.

A

Don't need to write here and test at the end or at the beginning,, so we have here and a support.

A

Page of our base, php file,, which is a page object from conception, and here are some properties.

A

Like the url,, here's our footer and our footer imprint link., it is much better to define our.

A

Html markup in this file and then use our variables,, because this is much better for.

A

Reading for us developers- and you can change the markup.- maybe you can also reuse it on.

A

Different projects., I think you will have a newsletter subscription or anything else.

A

That you can reuse your code. okay. So now we just say here we have a public static, start page and.

A

Now we have to check what it is. it's a slider.. This slider tag, I think, is done by javascript,.

A

But we have this multiple slider feature with little sliders and we have the items inside.

A

Let me check our html markup for it.

A

Slider articular html, it's a snippet., so in the snippet we have here every.

A

Time this first slider is active, and in this there is a slider item.. This is the.

A

Iteration here., so this is our slider item and we want to test something on this item.

A

Okay, so we say here: “public static, start page”, is not right. It's on the start page, but it's just.

A

Article item that has a selector.

A

Our class here. so at first we want to test if these elements are there. okay, so we will inject.

A

This base string here and normally I write it as $page,, so this is just a convention for me,.

A

Because I always use $page here., so I can use different page objects. Like,.

A

Base-, category-page or whatever,, and I can maybe reduce the tests here,.

A

Because I just inject some other page object. for now just realize that I say it's base, page,.

A

Because this is a page that I am working on and where is it here.? Okay, my page now,.

A

I go to the start. Page double point double point url and now I will wait for our element.

A

The “$page::$slider” particular items, and yes now I know that the page is loaded. and I know that.

A

0 article items are not okay.. The next thing is that I want to test here something on our item,.

A

So every item has an image title and price.. The car was the first time on the roads,.

A

How many kilometres it has and the power of the motor. for now I just want to check here.

A

All elements and check in the first step, if this image here has the page.

A

Title on the alt tag, but here is something special,, because I cut here the title on a.

A

Specific lengths and I will also show the full last word.- this is a very cool.

A

Feature implemented, here. was a custom trick extension maybe,. We can take a look at it. Later,.

A

But for now you can say that this title is longer than the real title., so I have to.

A

Check if the alt tag contains the title to check, if this feature is working.

A

So I have to think about the name here.. I think the name can be dated. Slider items,.

A

Because there will be a few things that I have to check and first I will get all the items.

A

Here, too. and variable I can use here the.

A

“$I-≫Grabmultiple” and now I just also get my items string from inside.

A

And now there is a second variable, where I can get more information. and now there.

A

Is a second parameter where I can get an attribute., but I don't need it for now,.

A

Because I want to show you how to work here from scratch, and the next thing that will happen is.

A

That we have a loop here for each “$items as $item”.. Now we have here in arrays. What is a.

A

Bit tricky and for now we can say: okay now this is an empty statement,, but I can set here on record,.

A

When I want to use breakpoints from the command line,, I have to do here something like export.

A

Form or to set my xdebug configuration. here on my command line,. This little snippet here is also.

A

A gis, I will later do a link here on the video description, and so this is all what I have to do.

A

To make xdebug run from my command line and for now I go back to phpstorm and say here: I listen.

A

To xdebug and when I now run this here,, so we just makes a slider, here we can do and when.

A

Have been run, we can use this full command here and then just go back to here and say just runs a.

A

Slider folder., you also can use the test here, and you also can check here for a simple test to run.

A

But for me now it's okay to run the slider test,, so it will open and wait for the slider element.

A

And then it will break here., and now I have 45 items.. This is a problem, because we have to do.

A

A better deal on it here to get our title. okay, but for now this was the first try, and we will.

A

See that our selector is not working.. Okay, let's check out for a better selector,. We want all the.

A

Titles here on our elements, so let me check here the title.. It's like the headlines and we can say.

A

Here, ok, please copy selector and we will see that we get all these headline elements. Here.

A

So we will stop here and our selector what is called “public static, $sliderheadline” and now.

A

Here we can just say,. Okay, please give me the selector, and now we see that our selector is not.

A

The best,, but we have the big deal that we can add here some properties to our html markup to.

A

Make this more effective. so where's this problem here and now we can say: ok on the slider item,.

A

We have here our heating- and you see here that there is a truncated word filter, but.

A

For now I just add a data-cc for codeception here, and I can say this is my slider article.

A

Headline- and I will just take this here- is the wrong button. Okay, and we will see.

A

That we also are using here data-cc attribute.. I just copy this here also.

A

Do it here, and now I can say: okay, this is maybe here our slider article headline and.

A

Now I have here the headline.. I also have to remove this here from the copy paste and.

A

Maybe now I can get all the headlines as headlines and have no new selector.. It's.

A

A slider article. we have to build this new slider bar., I'm taking a headline here and.

A

Now we will see that we have headlines and we can say as an item.. This is okay for me,.

A

For now., but it's going to make it to the headlines. and okay: let's rerun the test,.

A

We have this breakpoint here. so far so good and I hope to get all the headlines.

A

Back to phpstorm and we have no headlines and so after a little analysis here I see that there is.

A

Much javascript voodoo here on the slider, and you can say that there are five items: loaded.

A

Here on the viewport before you see here and one more to the left and the others have some.

A

Duplication and sometimes they are empty, as you can see here on the console debugger., you see.

A

Here a lot of items., we also need a sector for the image, and we can use this here also from the.

A

Image.- and we can say here is the article image- and we can add this here to our base page object.

A

And say: ok, this article image here is no image and then we can also get all of our images here.

A

On our tests., so we can say we just duplicate this line here and say: ok images as images.

A

And on the images we want to have a title. I'll, take the alt attribute. and now let us check here.

A

If this makes sense for us as a publisher., I have to break this video here, and I think it's late.

A

In the evening., its live coding, and I want to show you how house, workers and house work feels and how.

A

This job is in real life., so 23:45 here this looks good for me and I hope that I have image text or.

A

Image text here, but now I can say, okay number three is good for two and number three years.

A

Ago for power. how many seven got seven?- I don't know so much about cars,. So this is very good,.

A

Because now we can say we can validate these five items here.. Now we have these headlines and.

A

We can say: okay, we also use a key here, so we'll see the right, position.. Okay and now we can say.

A

$I-≫Assertsearchcontains.

A

This needle. now is a headline: is the haystack? Is the it's not the imogen stuff? It's signatures out.

A

Text. now I can say here is $images of text, and you can say okay here and.

A

Well, this work.! No, this will not work, because this is only handling when,.

A

$Headline., so if the $headline is empty.

A

Then please continue here,, so I can set up a whole bunch of conditions.. I can read it very easily and.

A

I don't have to do in other cases where I have logic inside,. I can just say when this is not the.

A

Case just continue and ok this will work.. I hope, let's run this argument to pass as it contains,.

A

Must be it's real string? Give, then, okay, this is wrong.. Assert string, contains string needle.

A

Head stake on the next pitch fan for me, I will give you a little beer, here.

A

Okay, green. The problem now is that I see here as a string contains to engulf and when it will.

A

Fail, I don't know exactly what slider is here, so I can do the most little thing and you can.

A

Say here I have an option to add a message, and I say just can say here: he is dollar key.

A

And now we will have a key here. Okay, here is a key, and now I think we have our first test.

A

Because we can see that the title is actually the alltech of the image in every item here.

A

On my slider, so we can just commit some stuff. Let us see here we do some things. Maybe it's.

A

Easier to see this here on pitch pistons, so on the base template, we add new selectors for.

A

The particular article slider- this is okay here, base dot, php file and.

A

We also adds here some data, cue attributes. I sing for our.

A

So the back, you get you beautiful article, chimere them and we adhere and stoppage. Article cyst says.

A

So here we go so let's make a little break and see what we've done here. We add a new test here. It's.

A

Our stoppage article cyst and it's waiting first page and for the elements of the slower article.

A

Item and then we validate the slider items for now. We only validate that our headlines. Our part.

A

Of the alt tag on the images for our co friendly page and we iterate on this headlines, guarantee.

A

Here and then we got the headline, there are very much elements what are not filled in the initial.

A

State of the page and the slider is a yellow script and we'll make this later so we have to.

A

Skip this empty elements here, and we can say we do- will continue here because we can now handle.

A

Here anything, what's is not working so good for us and we have it clear on this part of.

A

The voyage statement, so we don't have to do very much it'll else, statements done on the logical.

A

Part we just say when something is wrong here. Please continue. This is very easy to read for.

A

Us and after that we can say: okay here we have an asset in contain string for the headline and we.

A

Will check if this is part of the alphatech of the image and for better overview? We give this.

A

Message here to our terminal that we can see what he has maybe problems here. So let's check what.

A

Else we can check here on this item now we see here that is there a surprise and some properties.

A

We can check this properties here as they are working for now. We will see that here are a few.

A

Elements that don't have any kilometers and here are elements that have kilometers, and maybe this.

A

Is a bit boring when we check through this detail stuff, so maybe it's more important to check if the.

A

Link here is working because we already have the title and when we click here, we can check that.

A

This title will be here on our headline, so, let's think about to realize this test. I think this is a.

A

New test, because we don't need to validate here slot items, but we do something similar because.

A

Now we will get the highest. I don't want to work with some click element here to click the slider.

A

Elements because we have the super dynamic, javascript slider and I think for me it's.

A

Easier to get the halves of every item here, so we will very day to know that the public function.

A

Thirty days, slider urls working and have the right type slurs, and yes, we also have here.

A

Our acceptance test, what we need as dollar, I- and I also need our base page object for.

A

Our dollar page sing, so we will get our hammers. Let me check the a text around.

A

The image we have here, our image, and so we just adhere- and you got a cc with article a.

A

A

And now we can wrap the house as a beautiful it's because now we have here this image and.

A

Maybe it's the buffs image, so we say check now we will go back to our test and say: ok, please.

A

This page is now already loaded because our before will run before every public.

A

Function or every test here, we have here also in settings that it will not reload every time.

A

The browser this is a default setting. We can also say we want to reload the browser every.

A

Time and we want to clear all cookies and all the stuff, but for now I want this with.

A

Chrome session to be permanent open. This is a bit faster for me and I have two page.

A

Double point double points, and we have this a check here and from this I take we want to get.

A

And we also want to get the images of text like here.

A

Because this is a full page title and not the shoulders page title from the slider headline.

A

And now we will check what will happen here because we have to iterate through the harris.

A

Justin for each with key statements, which was key, adamson use it so often so for that.

A

Index for me and that's our f and url.

A

And I have to wait for something it's called here's headline.

A

Okay, now we have a new selector. I think here on this little project we can handle.

A

Our stuff object public check. This is not the best selector here we.

A

Also add better selector, so let's open the template from it. So let's check our.

A

Template here for our article default- and we have this little hairs for h,.

A

Window here h4, we have this title here and we wait and deficit c as you do. What we call.

A

Title so we have this title here now and now we go back to our base page object and say.

A

Ok, please remove this horrible stuff and edge here, something we can read and understand. Yes,.

A

And this makes us of tests much better. So now we have to see em and we go to.

A

Test and say, okay, we say is the same than on our interpreters of text, so we can say.

A

Here that asserts same expected and actual expected, this images take with our key and.

A

We have here our headline and we can say: ok, please give me here, we will see in the habit.

A

And we will have much informations, but maybe we also want to see here.

A

Okay, now it's time to run a specific test here we copy this name here and we can say here: okay,.

A

Just please, and we have and just like this, and it only will run this specific test. Okay, let us.

A

Commit here something fast: we make something on the tip template and something on the test here.

A

Also, I fix some sing on the importer because there were some spaces and some tricky issues.

A

Here but I don't want to show you because this was really unnecessary stuff and I say just premiered.

A

Actuarial stage for youtube video for now, because now we can say hey everything for the start, page.

A

Slider works for me, we checked an attribute and we check cell phone functionality if we.

A

Can click it and see you can say when there no items loaded so far, and this is a bit a.

A

Trick here what will happens when there will be no items, it can be when the full import fails.

A

There will be, you know, items here so for me I just move. Is this because it's when there are.

A

No articles, we don't have some full bags that we say hey. Please come back later. We have here some.

A

Nice, cars and now we will just remove this here and we will run all our slide sets, and this can.

A

Be that is a little problem. Let's check it out. I think it is working because the first test.

A

Is waiting for things that have to be loaded and it's a-ok? I ran a time out, and this was.

A

Also, the last thing: what we have to prove here, that this will work when there are no articles.

A

For now, the slider testing, for me is ok and it works for me also, it's a bit faster good, so the.

A

Overview page is here, and what we want to check here is one thing is the paging, and I think this.

A

Is last single for this video tutorial because I spent here a lot of times even in to fix some.

A

Unnecessary and super annoying things I want to check if this car here has another title.

A

On page 2, ok, so it could be use. If this is same here, we can check subtitles if there something.

A

Similar, we have this passat variant and we have this part variant, but maybe we can say we don't.

A

Have the same price? Otherwise I had to add here the article id what I also can do on a hidden.

A

Field- I think maybe this is easier for me, because we need also this article, ideally maybe later so.

A

Let's go superfast to our article overview and it here's some hidden field. This is a paging under.

A

The paging articles here for articles item we have here some title, you and we can say.

A

Okay, just adhere didn't field, he gets, but let's type in I will say this. We will check this works.

A

Or particularly, was a white well you and me now. This is definitely unique.

A

Id for me, so we will add a new test here for our overview, intercept, generates, says.

A

Acceptance and it's maybe we have here detailed overview, and so I can.

A

Say he gets over mu obsessed, you know it's generated and we have. I.

A

Will be obsessed and we have the same procedure as every time we.

A

Gets here today's as the page property, and when we go to this, I think it's just.

A

You're both wrong okay, and we have here's this and your selector. What.

A

Is just particularly okay: now we can get all of this article ids of the first page. Wait.

A

For element, we just have to go into double points. I hope that scan conception can wait.

A

For on hidden elements, I don't know exactly, but it's here's the article ids and I want to first.

A

Let me show you later the full html we caught, because this name will be transformed.

A

To little sense, first of all, say: article ids reform will not work on multiple items.

A

Multiple- and I hope that I can grab here- also value- we will see if this works and.

A

So this will also one so with a bit of luck. This will be our first page id so.

A

Now I have to go to the second page. I can do this on the url. You see, there's just a.

A

Parameter page two here on this part, but I can also say hey, please. Let me.

A

Click this link here this is vector as easy as I think now, so we can say.

A

Nation second item: this is so bad bus.

A

And I do oh, this is hot. This is okay. We expect somebody here and say this will be just don't.

A

Know how to write it? The cl ends and I make an id but but 90 is unique. So I just make.

A

To the front end also, it's super important to make clear selectors we have here now or.

A

Page numbers- and we say okay- mean id with accreditation tone. Okay, so now I can say.

A

Second item to create, then I also have to wait for.

A

This here and after that I can say: okay use me is the same single year as the second patient.

A

Id spoke to mrs. work, and now I can say I see it's not the same expected this first, we have to ready.

A

Davies, we can say: okay, we have this obstacle, you will see wow. This was great and I can also.

A

Say that this works, because you can see here- is 1 3, 4, 2, 2 2 h is different to one two. Six.

A

Nine nine four six we can say here we are on edge from one and say I don't already have we.

A

Lower this to check this is a page number part. We have here this one straight forward to the.

A

Two eight page: two: we have here one two, six, nine, four six and this is working perfect. So we also.

A

Checked here our navigation, let's come into stuff, okay. This looks good for me so for now,.

A

Let's run all the tests, because this makes a bit of fun here. Let me check what we have.

A

To remove just the article, so maybe it's for big items I just have to go to the bi modes. I.

A

Delete some words and now all my tests with one and I will see the steps here on my terminal and.

A

This is a patient s, so we have here 18 seconds and have two really good tests here. Let's check.

A

It here we have well, we have four tests, you just put the test, actually not the most particular test.

A

But this test is better than nothing in tested and it's also good find if your start page is.

A

Loading and so maybe this is some kind of the simplest test that will work. We have many dates.

A

Slightly well as out working and hair for rights titles. Now you see why I'm using this very metal.

A

Tool names because it's something not gherkin like, but anybody who reaches hopefully will.

A

Understand this, and here we see what happens, and now we have here also the very date of the.

A

Slider items this is that we have to check just only the alphatech, but in the future.

A

We will do here more things and, on the all of you assess, we will also check that the first.

A

Eye to their article id is different to page two. Maybe you can make a lot of sense here, but.

A

I'm on the bottom are check, sir article id and later I have this here, so thank you for this.

A

Video now you can start testing you web pages with conceptions. You see here on this video, how.

A

To get out of trouble and how to avoid trouble, make good selectors and the good loading time.

A

For your tests and then they will bring you a lot of fun and healthy to your walk into your.

A

Life and please follow this channel here, check out the descriptions and stay green. Thank you.

A