Chapters

32 Chapters | 4:16:27 |

01

Hello LAST Stack!

4:01
02

Asset Mapper

5:18
03

JavaScript Modules

6:33
04

3rd Party JavaScript Packages

5:05
05

CSS

6:22
06

Tailwind CSS

9:24
07

Stimulus

6:45
08

Symfony UX Packages

6:47
09

Turbo Drive

5:42
10

Turbo Frames

8:43
11

Popover!

11:44
12

Auto-Submitting Forms

3:37
13

Pagination & Column Sorting

8:04
14

Data Tables with Turbo Frames

7:03
15

View Transitions

7:04
16

Toast Notifications

3:46
17

Fancier Toasts: Auto-close & Fading

7:34
18

Turbo Streams: Update any Element

5:23
19

HTML dialog for Modals

13:18
20

AJAX Modal!

8:29
21

Fantastic Modal UX with a Loading State

8:04
22

Fancy things on Modal Form Success

8:30
23

More with fun Modals! Editing & Deleting

10:05
24

Turbo Stream Responses

4:24
25

Twig Components

10:52
26

Modal Twig Component

11:54
27

Live Components

11:47
28

Real-Time Validation & Dependent Form Fields

11:37
29

Testing Part 1: Twig & Live Components

5:32
30

Testing Part 2: Functional Testing

12:36
31

Performance

9:16
32

Bonus: More on Flowbite

11:08

> Symfony 6 > 30 Days with LAST Stack

Buy Access to Course

30.

Testing Part 2: Functional Testing

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Welcome back to part 2 of day 29. I bent the rules today and made it a double feature. We talked about testing Twig & Live components... but we also need to talk about functional - or end-to-end - testing in general. That's where we programmatically control a browser, have it click links, fill out forms, etc.

Two things about this. First, we're going to create a system that I really like. And second, the road to get there is going to be... honestly, a bit bumpy. It's not a smooth process and that's something we as a community should work on.

zenstruck/browser

Symfony has built-in functional testing tools, but I like to use another library. At your terminal, install it with:

composer require zenstruck/browser --dev

Next, in the tests/ folder, I'll create a new directory called Functional/... then a new class called VoyageControllerTest. And I guess I could put that into a Controller/ directory also.

For the guts, I'll paste in a finished test:

            Copy Code

                            Show All Lines

                        37 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 2
                            
            namespace App\Tests\Functional;
        
            use App\Factory\PlanetFactory;
        
            use App\Factory\VoyageFactory;
        
            use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
        
            use Zenstruck\Browser\Test\HasBrowser;
        
            use Zenstruck\Foundry\Test\Factories;
        
            use Zenstruck\Foundry\Test\ResetDatabase;
        
            class VoyageControllerTest extends WebTestCase
        
            {
        
                use ResetDatabase;
        
                use Factories;
        
                use HasBrowser;
        
                public function testCreateVoyage()
        
                {
        
                    PlanetFactory::createOne([
        
                        'name' => 'Earth',
        
                    ]);
        
                    VoyageFactory::createOne();
        
                    $this->browser()
        
                        ->visit('/')
        
                        ->click('Voyages')
        
                        ->click('New Voyage')
        
                        ->fillField('Purpose', 'Test voyage')
        
                        ->selectFieldOption('Planet', 'Earth')
        
                        ->click('Save')
        
                        ->assertElementCount('table tbody tr', 2)
        
                        ->assertSee('Bon voyage')
        
                    ;
        
                }
        
            }

Ok, we're using ResetDatabase and Factories... it extends the normal WebTestCase for functional tests... and then HasBrowser comes from the Browser library and gives us the ability to call $this->browser() to control a browser with this really smooth API. This goes through the flow of going to the voyage page, clicking "New voyage", filling out the form, saving and asserting at the bottom. The test starts with a single Voyage in the database, so after we create a new one, we assert that there are two on the page.

To run this, use the same command, but target the Functional/ directory:

symfony php vendor/bin/simple-phpunit tests/Functional

And... it actually passes! Sweet!

Testing JavaScript with Panther

But hold your horses. Behind the scenes, this is not using a real browser: it's just making fake requests in PHP. That means it doesn't execute JavaScript. We're testing the experience a user would have if they had JavaScript disabled. That's fine for many situations. However, this time, I want to test all the modal fanciness.

To run the test using a real browser that supports JavaScript - like Chrome - change to $this->pantherBrowser():

            Copy Code

                            Show All Lines

                        37 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 11
                            
            class VoyageControllerTest extends WebTestCase
        
            {
        
                Show Lines

                                                    // ... lines 14 - 17
                            
                public function testCreateVoyage()
        
                {
        
                Show Lines

                                                    // ... lines 20 - 24
                            
                    $this->pantherBrowser()
        
                Show Lines

                                                    // ... lines 26 - 33
                            
                    ;
        
                }
        
            }

Try it:

symfony php vendor/bin/simple-phpunit tests/Functional

No dice! But a nice error: we need to install symfony/panther. Let's do that!

composer require symfony/panther --dev

Panther is a PHP library that can programmatically control real browsers on your machine. To use it, we also need to extend PantherTestCase:

            Copy Code

                            Show All Lines

                        37 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 6
                            
            use Symfony\Component\Panther\PantherTestCase;
        
                Show Lines

                                                    // ... lines 8 - 11
                            
            class VoyageControllerTest extends PantherTestCase
        
            {
        
                Show Lines

                                                    // ... lines 14 - 35
                            
            }

Try it again:

symfony php vendor/bin/simple-phpunit tests/Functional

We don't see the browser - it opens invisibly in the background - but it's now using Chrome! And the test fails - pretty early:

Clickable element "New Voyage" not found.

Hmm. It clicked "Voyages", but didn't find the "New Voyage" button. A fantastic feature of zenstruck/browser with Panther is that, when a test fails, it takes a screenshot of the failure.

Inside the var/ directory... here it is. Huh, the screenshot shows that we're still on the homepage - as if we never clicked "Voyages"... though you can kind of see that the voyages link looks active.

The problem is that the page navigation happens via Ajax... and our tests don't know to wait for that to finish. It clicks "Voyages"... then immediately tries to click "New Voyage". This will be the main thing that we need to fix.

Loading a "test" Dev Server

But before that, I see a bigger problem! Look at the data: this is not coming from our test database! This is coming from our dev site!

Even though we can't see it, Panther is controlling a real browser. And... a real browser needs to access our site using a real web server via a real web address. Because we're using the Symfony web server, Panther detected that and... used it!

But... that's not what we want! Why? Our server is using the dev environment and the dev database. Our tests should use the test environment and the test database.

To fix this, open up phpunit.xml.dist. I'll paste in two environment variables:

            Copy Code

                            Show All Lines

                        42 lines
            |
            phpunit.xml.dist
        
                Show Lines

                                                    // ... lines 1 - 3
                            
            <phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        
                Show Lines

                                                    // ... lines 5 - 9
                            
            >
        
                <php>
        
                Show Lines

                                                    // ... lines 12 - 17
                            
                    <server name="SYMFONY_PROJECT_DEFAULT_ROUTE_URL" value="" />
        
                    <server name="PANTHER_APP_ENV" value="test" />
        
                </php>
        
                Show Lines

                                                    // ... lines 21 - 40
                            
            </phpunit>

The first... is kind of a hack. That tells Panther to not use our server. Instead, Panther will now silently start its own web server using the built-in PHP web server. The second line tells Panther to use the test environment when it does that.

Over in the test, to make it even easier to see if this is working, after we click voyages, call ddScreenshot():

            Copy Code

                            Show All Lines

                        38 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 11
                            
            class VoyageControllerTest extends PantherTestCase
        
            {
        
                Show Lines

                                                    // ... lines 14 - 17
                            
                public function testCreateVoyage()
        
                {
        
                Show Lines

                                                    // ... lines 20 - 24
                            
                    $this->pantherBrowser()
        
                        ->visit('/')
        
                        ->click('Voyages')
        
                        ->ddScreenshot()
        
                Show Lines

                                                    // ... lines 29 - 34
                            
                    ;
        
                }
        
            }

Take a screenshot, then dump and die.

Run it:

symfony php vendor/bin/simple-phpunit tests/Functional

It hits that... and saved a screenshot! Cool! Find that in var/. And... ok. It looks like the new web server is being used... but it's missing all the styles!

Debugging by Opening the Browser

Time for some detective work! To understand what's going on, we can temporarily tell Panther to actually open the browser, like, so we can see it and play with it.

After we visit, say ->pause():

            Copy Code

                            Show All Lines

                        39 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 11
                            
            class VoyageControllerTest extends PantherTestCase
        
            {
        
                Show Lines

                                                    // ... lines 14 - 17
                            
                public function testCreateVoyage()
        
                {
        
                Show Lines

                                                    // ... lines 20 - 24
                            
                    $this->pantherBrowser()
        
                        ->visit('/')
        
                        ->pause()
        
                Show Lines

                                                    // ... lines 28 - 35
                            
                    ;
        
                }
        
            }

Then, to open the browser, prefix the test command with PANTHER_NO_HEADLESS=1:

PANTHER_NO_HEADLESS=1 symfony php vendor/bin/simple-phpunit tests/Functional

And... woh! It popped up the browser then paused. Now we can view the page source. Here's the CSS file. Open that. It's a 404 not found. Why?

In the dev environment, our assets are served through Symfony: they're not real, physical files. If you prefix the URL with index.php, it works. Panther uses the built-in PHP web server... and it needs a rewrite rule that tells it to send these URLs through Symfony. Honestly, it's an annoying detail, but we can fix it.

Back at the terminal, hit enter to close the browser. In tests/, create a new file called router.php. I'll paste in the code:

            Copy Code

                            Show All Lines

                        16 lines
            |
            tests/router.php
        
                Show Lines

                                                    // ... lines 1 - 2
                            
            if (is_file($_SERVER['DOCUMENT_ROOT'].\DIRECTORY_SEPARATOR.$_SERVER['SCRIPT_NAME'])) {
        
                return false;
        
            }
        
            $script = 'index.php';
        
            $_SERVER = array_merge($_SERVER, $_ENV);
        
            $_SERVER['SCRIPT_FILENAME'] = $_SERVER['DOCUMENT_ROOT'].\DIRECTORY_SEPARATOR.$script;
        
            $_SERVER['SCRIPT_NAME'] = \DIRECTORY_SEPARATOR.$script;
        
            $_SERVER['PHP_SELF'] = \DIRECTORY_SEPARATOR.$script;
        
            require $script;

This is a "router" file that will be used by the built-in web server. To tell Panther to use it, in phpunit.xml.dist, I'll paste in another env var: PANTHER_WEB_SERVER_ROUTER set to ../tests/router.php:

            Copy Code

                            Show All Lines

                        43 lines
            |
            phpunit.xml.dist
        
                Show Lines

                                                    // ... lines 1 - 3
                            
            <phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        
                Show Lines

                                                    // ... lines 5 - 9
                            
            >
        
                <php>
        
                Show Lines

                                                    // ... lines 12 - 19
                            
                    <server name="PANTHER_WEB_SERVER_ROUTER" value="../tests/router.php" />
        
                </php>
        
                Show Lines

                                                    // ... lines 22 - 41
                            
            </phpunit>

Try it!

PANTHER_NO_HEADLESS=1 symfony php vendor/bin/simple-phpunit tests/Functional

And now... it works! Hit enter to finish. Then remove the pause().

Run the test again, but without the env var:

symfony php vendor/bin/simple-phpunit tests/Functional

Waiting for the Turbo Page Load

Cool: it hit our screenshot line. Pop that open. Ok, we're back to the original problem: it's not waiting for the page to load after we click the link.

Solving this... isn't as simple as it should be. Say $browser =, close that and start a new chain with $browser below. In between, I'll paste in two lines. This is lower-level, but waits for the aria-busy attribute to be added to the html element, which Turbo does when it's loading. Then it waits for it to go away:

            Copy Code

                            Show All Lines

                        42 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 11
                            
            class VoyageControllerTest extends PantherTestCase
        
            {
        
                Show Lines

                                                    // ... lines 14 - 17
                            
                public function testCreateVoyage()
        
                {
        
                Show Lines

                                                    // ... lines 20 - 24
                            
                    $browser = $this->pantherBrowser()
        
                        ->visit('/')
        
                        ->click('Voyages')
        
                    ;
        
                    $browser->client()->waitFor('html[aria-busy="true"]');
        
                    $browser->client()->waitFor('html:not([aria-busy])');
        
                    $browser
        
                        ->ddScreenshot()
        
                        ->click('New Voyage')
        
                        ->fillField('Purpose', 'Test voyage')
        
                        ->selectFieldOption('Planet', 'Earth')
        
                        ->click('Save')
        
                        ->assertElementCount('table tbody tr', 2)
        
                        ->assertSee('Bon voyage')
        
                    ;
        
                }
        
            }

Try the test now:

symfony php vendor/bin/simple-phpunit tests/Functional

Then... pop open the screenshot. Woh! It is now waiting for the Ajax call to finish. But remember: we're also using view transitions. The page loaded... but it's still in the middle of the transition. We'll fix that in a minute.

Custom Browser & Base Test Class

But first, we need to clean this up: this is way too much work. What I would love is a new method on the browser itself - like waitForPageLoad(). And we can do that with a custom browser class!

In the tests/ directory, create a new class called AppBrowser. I'll paste in the guts:

            Copy Code

                            Show All Lines

                        17 lines
            |
            tests/AppBrowser.php
        
                Show Lines

                                                    // ... lines 1 - 2
                            
            namespace App\Tests;
        
            use Zenstruck\Browser\PantherBrowser;
        
            class AppBrowser extends PantherBrowser
        
            {
        
                public function waitForPageLoad(): self
        
                {
        
                    $this->client()->waitFor('html[aria-busy="true"]');
        
                    $this->client()->waitFor('html:not([aria-busy])');
        
                    return $this;
        
                }
        
            }

This extends the normal PantherBrowser and adds a new method which those same two lines.

When we call $this->pantherBrowser(), we now want it to return our AppBrowser instead of the normal PantherBrowser. To do that, you guessed it, it's an environment variable: PANTHER_BROWSER_CLASS set to App\Tests\AppBrowser:

            Copy Code

                            Show All Lines

                        44 lines
            |
            phpunit.xml.dist
        
                Show Lines

                                                    // ... lines 1 - 3
                            
            <phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        
                Show Lines

                                                    // ... lines 5 - 9
                            
            >
        
                <php>
        
                Show Lines

                                                    // ... lines 12 - 20
                            
                    <server name="PANTHER_BROWSER_CLASS" value="App\Tests\AppBrowser" />
        
                </php>
        
                Show Lines

                                                    // ... lines 23 - 42
                            
            </phpunit>

To make sure this is working, dd(get_class($browser));:

            Copy Code

                            Show All Lines

                        43 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 11
                            
            class VoyageControllerTest extends PantherTestCase
        
            {
        
                Show Lines

                                                    // ... lines 14 - 17
                            
                public function testCreateVoyage()
        
                {
        
                Show Lines

                                                    // ... lines 20 - 24
                            
                    $browser = $this->pantherBrowser()
        
                        ->visit('/')
        
                        ->click('Voyages')
        
                    ;
        
                    dd(get_class($browser));
        
                Show Lines

                                                    // ... lines 30 - 40
                            
                }
        
            }

Run the test:

symfony php vendor/bin/simple-phpunit tests/Functional

And... yes! We get AppBrowser! Unfortunately, while the new method would work, we don't get autocompletion. Our editor has no idea that we swapped in a sub-class.

To improve this, let's do one last thing: in tests/, create a new base test class: AppPantherTestCase. I'll paste in the content:

            Copy Code

                            Show All Lines

                        19 lines
            |
            tests/AppPantherTestCase.php
        
                Show Lines

                                                    // ... lines 1 - 2
                            
            namespace App\Tests;
        
            use Symfony\Component\Panther\PantherTestCase;
        
            use Zenstruck\Browser\Test\HasBrowser;
        
            class AppPantherTestCase extends PantherTestCase
        
            {
        
                use HasBrowser {
        
                    pantherBrowser as parentPantherBrowser;
        
                }
        
                protected function pantherBrowser(array $options = [], array $kernelOptions = [], array $managerOptions = []): AppBrowser
        
                {
        
                    return $this->parentPantherBrowser($options, $kernelOptions, $managerOptions);
        
                }
        
            }

It extends the normal PantherTestCase... then overrides the pantherBrowser() method, calls the parent, but changes the return type to be our AppBrowser.

Over in VoyageControllerTest, change this to extend AppPantherTestCase, then make sure to remove use HasBrowser:

            Copy Code

                            Show All Lines

                        37 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 6
                            
            use App\Tests\AppPantherTestCase;
        
                Show Lines

                                                    // ... lines 8 - 10
                            
            class VoyageControllerTest extends AppPantherTestCase
        
            {
        
                use ResetDatabase;
        
                use Factories;
        
                Show Lines

                                                    // ... lines 16 - 35
                            
            }

Then we can tighten things up: reconnect all of these spots... then use the new method: ->waitForPageLoad()... with auto-complete! Remove the ddScreenshot():

            Copy Code

                            Show All Lines

                        36 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 10
                            
            class VoyageControllerTest extends AppPantherTestCase
        
            {
        
                Show Lines

                                                    // ... lines 13 - 15
                            
                public function testCreateVoyage()
        
                {
        
                Show Lines

                                                    // ... lines 18 - 22
                            
                    $this->pantherBrowser()
        
                        ->visit('/')
        
                        ->click('Voyages')
        
                        ->waitForPageLoad()
        
                        ->click('New Voyage')
        
                        ->fillField('Purpose', 'Test voyage')
        
                        ->selectFieldOption('Planet', 'Earth')
        
                        ->click('Save')
        
                        ->assertElementCount('table tbody tr', 2)
        
                        ->assertSee('Bon voyage')
        
                    ;
        
                }
        
            }

And let's see where we are!

symfony php vendor/bin/simple-phpunit tests/Functional

Further!

Form field "Purpose" not found.

So it clicked Voyages, clicked "New Voyage"... but couldn't find the form field. If we look down at the error screenshot, we can see why: the modal content is still loading! You might see the form in your screenshot - sometimes the screenshot happens just a moment later, so the form is visible - but this is the problem.

Disabling View Transitions

Oh, but before we fix this, I also want to disable view transitions. In templates/base.html.twig, the easiest way to make sure view transitions don't muck up our tests is to remove them. Say if app.environment != 'test, then render this meta tag:

            Copy Code

                            Show All Lines

                        99 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
                <head>
        
                Show Lines

                                                    // ... lines 4 - 6
                            
                    {% if app.environment != 'test' %}
        
                        <meta name="view-transition">
        
                    {% endif %}
        
                Show Lines

                                                    // ... lines 10 - 16
                            
                </head>
        
                Show Lines

                                                    // ... lines 18 - 97
                            
            </html>

Anyway, back to our failure. When we click to open the modal, what need wait for the modal to open - that's actually instant - but also wait for the <turbo-frame> inside to finish loading.

Open AppBrowser. I'll paste in two more methods:

            Copy Code

                            Show All Lines

                        40 lines
            |
            tests/AppBrowser.php
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            use Facebook\WebDriver\WebDriverBy;
        
                Show Lines

                                                    // ... lines 6 - 7
                            
            class AppBrowser extends PantherBrowser
        
            {
        
                Show Lines

                                                    // ... lines 10 - 17
                            
                public function waitForDialog(): self
        
                {
        
                    $this->client()->wait()->until(function() {
        
                        return $this->crawler()->filter('dialog[open]')->count() > 0;
        
                    });
        
                    if ($this->crawler()->filter('dialog[open] turbo-frame')->count() > 0) {
        
                        $this->waitForTurboFrameLoad();
        
                    }
        
                    return $this;
        
                }
        
                public function waitForTurboFrameLoad(): self
        
                {
        
                    $this->client()->wait()->until(function() {
        
                        return $this->crawler()->filter('turbo-frame[aria-busy="true"]')->count() === 0;
        
                    });
        
                    return $this;
        
                }
        
            }

The first - waitForDialog() - waits until it sees a dialog on the page with an open attribute. And, if that open dialog has a <turbo-frame>, it waits for that to load: it waits until there aren't any aria-busy frames on the page.

In VoyageControllerTest, after clicking "New Voyage", say ->waitForDialog():

            Copy Code

                            Show All Lines

                        37 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 10
                            
            class VoyageControllerTest extends AppPantherTestCase
        
            {
        
                Show Lines

                                                    // ... lines 13 - 15
                            
                public function testCreateVoyage()
        
                {
        
                Show Lines

                                                    // ... lines 18 - 22
                            
                    $this->pantherBrowser()
        
                Show Lines

                                                    // ... lines 24 - 26
                            
                        ->click('New Voyage')
        
                        ->waitForDialog()
        
                        ->fillField('Purpose', 'Test voyage')
        
                Show Lines

                                                    // ... lines 30 - 33
                            
                    ;
        
                }
        
            }

And now:

symfony php vendor/bin/simple-phpunit tests/Functional

So close!

table tbody tr expected 2 elements on the page but only found 1.

That comes from all the way down here! What's the problem this time? Back to the error screenshot! Ah: we filled out the form, it looks like we even hit Save... but we're asserting too quickly!

Remember: this submits into to a <turbo-frame>, so we need to wait for that frame to finish loading. And we have a way to do this: ->waitForTurboFrameLoad(). I'll also add a line to assert that we cannot see any open dialogs: to check that the modal closed:

            Copy Code

                            Show All Lines

                        39 lines
            |
            tests/Functional/VoyageControllerTest.php
        
                Show Lines

                                                    // ... lines 1 - 10
                            
            class VoyageControllerTest extends AppPantherTestCase
        
            {
        
                Show Lines

                                                    // ... lines 13 - 15
                            
                public function testCreateVoyage()
        
                {
        
                Show Lines

                                                    // ... lines 18 - 22
                            
                    $this->pantherBrowser()
        
                        ->visit('/')
        
                        ->click('Voyages')
        
                        ->waitForPageLoad()
        
                        ->click('New Voyage')
        
                        ->waitForDialog()
        
                        ->fillField('Purpose', 'Test voyage')
        
                        ->selectFieldOption('Planet', 'Earth')
        
                        ->click('Save')
        
                        ->waitForTurboFrameLoad()
        
                        ->assertElementCount('table tbody tr', 2)
        
                        ->assertNotSeeElement('dialog[open]')
        
                        ->assertSee('Bon voyage')
        
                    ;
        
                }
        
            }

Run the test one more time:

symfony php vendor/bin/simple-phpunit tests/Functional

It passes. Woo! I admit, that was some work, too much work! But I do love the end result.

Tomorrow - for our final day - we're going to talk about performance. And unlike today, things are going to quickly fall into place - I promise.

11 Comments

Sort By

apphancer 9 months ago

Right after composer require symfony/panther --dev I had to run composer require --dev dbrekelmans/bdi && vendor/bin/bdi detect drivers

1 | Reply |

Victor SFCASTS apphancer 9 months ago edited

Hey @apphancer ,

Thanks for sharing this with others! It might be helpful :)

Cheers!

| Reply |

fbourigault 7 months ago

I have issues with test execution speed :/

It looks like that waitForTurboFrameLoadcheck for any turbo-frame[aria-busy="true"] in the page is executed before Turbo adds the aria-busy="true" attribute to the frame.

I had similar issue with the modal loading. The tests complain about not finding the Purpose input. I added a wait for the form[name="voyage"] before calling fillField.

Does anyone have an idea of what can be done to get proper waiting?

| Reply |

sadikoff SFCASTS fbourigault 7 months ago edited

Hello @fbourigault

Great catch. in fact with turbo you should first wait for it to appear on the page, and then wait for disappear, it can be achieved with some spin() functions like here described https://docs.behat.org/en/v2.5/cookbook/using_spin_functions.html

Cheers!

| Reply |

TomDeRoo 9 months ago HIGHLIGHTED

Hey everyone

If anyone tries to get this whole Panther system working in the context of a containerized environment (in my case: a DDEV wrapper around Docker), you will need to jump through some extra hoops. And read some stackoverflow stuff. And documentation entries. Blergh...

Anyway, here's the idea: we want to get Panther working with Chromium in a DDEV context, and if you try that just using your "standard" DDEV config, you will be greeted by the following error:

1) App\Tests\Functional\VoyageControllerTest::testCreateVoyage
RuntimeException: "chromedriver" binary not found. Install it using the package manager of your operating system or by running "composer require --dev dbrekelmans/bdi && vendor/bin/bdi detect drivers".

Seems obvious enough; just run that entire suggestion, right? Except vendor/bin/bdi detect drivers does not do anything. That is because our web container is lacking Chromium. Let's fix that:

// Get into the container if you exited it before
ddev ssh
// Install chromium
sudo apt-get update
sudo apt-get install chromium -y

Awesome, lots of installation text. Run vendor/bin/bdi detect drivers again, and hooray:

                                                                                                                        
 [OK] chromedriver 120.0.6099.109 installed to drivers/chromedriver

Try to run the tests again: php ./vendor/bin/simple-phpunit. I do so from within the DDEV web container as I am already there, but you could of course also run it from outside. But, alas:

1) App\Tests\Functional\VoyageControllerTest::testCreateVoyage
Facebook\WebDriver\Exception\SessionNotCreatedException: session not created: Chrome failed to start: exited normally.
  (session not created: DevToolsActivePort file doesn't exist)
  (The process started from chrome location /usr/bin/chromium is no longer running, so ChromeDriver is assuming that Chrome has crashed.)

If you Google that error a bit, you will find a whole bunch of expert tech talk on configuring Selenium in the context of Python or Java or whatever, all of which is more or less impossible for me to understand properly. But apparently it might be solved by starting the chromium instance with a --no-sandbox argument. And luckily, the Panther docs cover that topic specifically here: https://symfony.com/doc/current/testing/end_to_end.html#chrome-specific-environment-variables. Use PANTHER_NO_SANDBOX to "Disable Chrome's sandboxing (unsafe, but allows to use Panther in containers)" - that sounds like it is exactly what we need. Add this to your .env.test.local:

PANTHER_NO_SANDBOX=true

If you now run the tests again, things will appear to work. Hooray, right? Except the browser that is running here is not finding your assets. It is explained in the main script how you need to use the tests/router.php to get this to work, but you also need to start the Chromium browser with the extra environment argument --disable-dev-shm-usage. This can be added to .env.test.local as well:

PANTHER_CHROME_ARGUMENTS="--disable-dev-shm-usage"

Note: these .env things can of course also be added to phpunit.xml.dist as <server> tags under <php>, but since we are assuming DDEV to be a purely local develoment environment, we do not want to activate all this stuff in a version controlled file.

TLDR: let us automate a great deal of this process in DDEV by working with a custom Dockerfile and a custom phpunit DDEV command.

File: .ddev/web-build/Dockerfile.chromium:

RUN apt-get update
RUN apt-get install chromium -y

File: .ddev/commands/web/phpunit

#!/bin/bash

## Description: Run phpunit CLI inside the web container, but do a check on Chromium driver first
## Usage: phpunit [flags] [args]
## Example: "ddev phpunit --group=focus"
## ExecRaw: true

FILE=./drivers/chromedriver
if [ -f "$FILE" ]; then
  echo "Chromium Driver $FILE exists - skipping bdi driver detect"
else
  echo "Chromium Driver $FILE does not exist - run bdi driver detect"
  php ./vendor/bin/bdi detect drivers
fi
php ./vendor/bin/simple-phpunit "$@"

You may also want to add /drivers to your local .gitignore, as this is probably only useful for local development. No need to pester your non-containered colleagues with it.

Do not forget our .env.test.local file:

# To let the Panther browser run inside the DDEV container context, we have to set no sandbox to true.
# See: https://symfony.com/doc/current/testing/end_to_end.html#chrome-specific-environment-variables
PANTHER_NO_SANDBOX=true
PANTHER_CHROME_ARGUMENTS="--disable-dev-shm-usage"

And finally, remember to have dbrekelmans/bdi as a composer dev package through composer require dbrekelmans/bdi --dev.

With these things in place, all you need to do to get started on an otherwise standard DDEV config is:

ddev start
ddev composer install
ddev phpunit

Your initial DDEV start-up will take some time due to Chromium installation, but I haven't found a way around using the full Chrome and that takes a while to install... Maybe some other ~~glorious fool~~tech hero can figure that out.

| Reply |

weaverryan SFCASTS TomDeRoo 9 months ago

Yo @TomDeRoo!

This is a crazy amount of work I'd love for us to make it LESS work but for now, your comment can at least be here to help.

Thanks!

| Reply |

MolloKhan SFCASTS TomDeRoo 9 months ago edited

Hey @TomDeRoo

Nicely done, thank you for sharing your solution with others!

Cheers!

| Reply |

apphancer 9 months ago edited

I was struggling a bit with issues with the ->click('New Voyage') resulting in the dialog not opening.
Eventually, it turned out that the first line $this->client()->waitFor('html[aria-busy="true"]'); in the waitForPageLoad() method was preventing this from working. Any ideas why?
Anyway, I've commented it out and the dialog is displaying and tests are all green again.

| Reply |

MolloKhan SFCASTS apphancer 9 months ago edited

Hey @apphancer

That's unexpected. I believe your site is running so fast that Turbo finishes loading before your waitFor() call. IIRC the second argument of that method is the amount of milliseconds it should wait before it "gives up", you could set it to 1 second so it doesn't wait for too long.
Let me know if it worked or if I'm completely wrong :P

Cheers!

| Reply |

apphancer MolloKhan 9 months ago

Thanks for the suggestion. I gave it a shot but no luck. Looking at the images in the error-screenshot folder, it looks like the /voyage page loads but no dialog opens.
This is the actual error:

There was 1 error:

1) App\Tests\Functional\VoyageControllerTest::testCreateVoyage
Facebook\WebDriver\Exception\TimeoutException:

/Users/m/Desktop/code-last-stack/vendor/php-webdriver/webdriver/lib/WebDriverWait.php:71

I don't really get it why it's saying that it's timing out because of that line, even when I've reduced the $timeoutInSecond parameter to 1 second.
It's no big deal. As I said, it's working after having commented out the first line of the waitForPageLoad() method. It's more curiosity than anything else.

| Reply |

MolloKhan SFCASTS apphancer 9 months ago

Yea, that's intriguing, but sadly I don't know the answer. At least you found a solution :)
Let me know if you discover the mystery. Cheers!

| Reply |

Symfony 6.4

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "4.x-dev", // 4.x-dev
        "doctrine/doctrine-bundle": "^2.10", // 2.12.x-dev
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.4.x-dev
        "doctrine/orm": "^2.16", // 2.18.x-dev
        "knplabs/knp-time-bundle": "dev-main", // dev-main
        "pagerfanta/doctrine-orm-adapter": "4.x-dev", // 4.x-dev
        "pagerfanta/twig": "4.x-dev", // 4.x-dev
        "symfony/asset": "6.4.*", // 6.4.x-dev
        "symfony/asset-mapper": "6.4.*", // 6.4.x-dev
        "symfony/console": "6.4.x-dev", // 6.4.x-dev
        "symfony/dotenv": "6.4.x-dev", // 6.4.x-dev
        "symfony/flex": "^2", // 2.x-dev
        "symfony/form": "6.4.x-dev", // 6.4.x-dev
        "symfony/framework-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/monolog-bundle": "^3.0", // dev-master
        "symfony/runtime": "6.4.x-dev", // 6.4.x-dev
        "symfony/security-csrf": "6.4.x-dev", // 6.4.x-dev
        "symfony/stimulus-bundle": "2.x-dev", // 2.x-dev
        "symfony/twig-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/ux-autocomplete": "2.x-dev", // 2.x-dev
        "symfony/ux-live-component": "2.x-dev", // 2.x-dev
        "symfony/ux-turbo": "2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "2.x-dev", // 2.x-dev
        "symfony/validator": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-link": "6.4.*", // 6.4.x-dev
        "symfony/yaml": "6.4.x-dev", // 6.4.x-dev
        "symfonycasts/dynamic-forms": "dev-main", // dev-main
        "symfonycasts/tailwind-bundle": "dev-main", // dev-main
        "tales-from-a-dev/flowbite-bundle": "dev-main", // dev-main
        "twig/extra-bundle": "^2.12|^3.0", // 3.x-dev
        "twig/twig": "^2.12|^3.0" // 3.x-dev
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.6.x-dev
        "phpunit/phpunit": "^9.5", // 9.6.x-dev
        "symfony/browser-kit": "6.4.*", // 6.4.x-dev
        "symfony/css-selector": "6.4.*", // 6.4.x-dev
        "symfony/debug-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/maker-bundle": "^1.51", // dev-main
        "symfony/panther": "^2.1", // v2.1.1
        "symfony/phpunit-bridge": "7.1.x-dev", // 7.1.x-dev
        "symfony/stopwatch": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-profiler-bundle": "6.4.x-dev", // 6.4.x-dev
        "zenstruck/browser": "1.x-dev", // 1.x-dev
        "zenstruck/foundry": "^1.36" // 1.x-dev
    }
}

Previous Chapter

Next Chapter

Testing Part 2: Functional Testing

Share this awesome video!

Keep on Learning!

zenstruck/browser

Testing JavaScript with Panther

Loading a "test" Dev Server

Debugging by Opening the Browser

Waiting for the Turbo Page Load

Custom Browser & Base Test Class

Disabling View Transitions

11 Comments

Delete comment?

What PHP libraries does this tutorial use?

Show Lines	// ... lines 1 - 2
	namespace App\Tests\Functional;

	use App\Factory\PlanetFactory;
	use App\Factory\VoyageFactory;
	use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
	use Zenstruck\Browser\Test\HasBrowser;
	use Zenstruck\Foundry\Test\Factories;
	use Zenstruck\Foundry\Test\ResetDatabase;

	class VoyageControllerTest extends WebTestCase
	{
	use ResetDatabase;
	use Factories;
	use HasBrowser;

	public function testCreateVoyage()
	{
	PlanetFactory::createOne([
	'name' => 'Earth',
	]);
	VoyageFactory::createOne();

	$this->browser()
	->visit('/')
	->click('Voyages')
	->click('New Voyage')
	->fillField('Purpose', 'Test voyage')
	->selectFieldOption('Planet', 'Earth')
	->click('Save')
	->assertElementCount('table tbody tr', 2)
	->assertSee('Bon voyage')
	;
	}
	}

Show Lines	// ... lines 1 - 11
	class VoyageControllerTest extends WebTestCase
	{
Show Lines	// ... lines 14 - 17
	public function testCreateVoyage()
	{
Show Lines	// ... lines 20 - 24
	$this->pantherBrowser()
Show Lines	// ... lines 26 - 33
	;
	}
	}

Show Lines	// ... lines 1 - 6
	use Symfony\Component\Panther\PantherTestCase;
Show Lines	// ... lines 8 - 11
	class VoyageControllerTest extends PantherTestCase
	{
Show Lines	// ... lines 14 - 35
	}

Show Lines	// ... lines 1 - 3
	<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
Show Lines	// ... lines 5 - 9
	>
	<php>
Show Lines	// ... lines 12 - 17
	<server name="SYMFONY_PROJECT_DEFAULT_ROUTE_URL" value="" />
	<server name="PANTHER_APP_ENV" value="test" />
	</php>
Show Lines	// ... lines 21 - 40
	</phpunit>

Show Lines	// ... lines 1 - 2
	if (is_file($_SERVER['DOCUMENT_ROOT'].\DIRECTORY_SEPARATOR.$_SERVER['SCRIPT_NAME'])) {
	return false;
	}

	$script = 'index.php';

	$_SERVER = array_merge($_SERVER, $_ENV);
	$_SERVER['SCRIPT_FILENAME'] = $_SERVER['DOCUMENT_ROOT'].\DIRECTORY_SEPARATOR.$script;

	$_SERVER['SCRIPT_NAME'] = \DIRECTORY_SEPARATOR.$script;
	$_SERVER['PHP_SELF'] = \DIRECTORY_SEPARATOR.$script;

	require $script;

Show Lines	// ... lines 1 - 2
	namespace App\Tests;

	use Zenstruck\Browser\PantherBrowser;

	class AppBrowser extends PantherBrowser
	{
	public function waitForPageLoad(): self
	{
	$this->client()->waitFor('html[aria-busy="true"]');
	$this->client()->waitFor('html:not([aria-busy])');

	return $this;
	}
	}

Show Lines	// ... lines 1 - 6
	use App\Tests\AppPantherTestCase;
Show Lines	// ... lines 8 - 10
	class VoyageControllerTest extends AppPantherTestCase
	{
	use ResetDatabase;
	use Factories;

Show Lines	// ... lines 16 - 35
	}

Show Lines	// ... lines 1 - 10
	class VoyageControllerTest extends AppPantherTestCase
	{
Show Lines	// ... lines 13 - 15
	public function testCreateVoyage()
	{
Show Lines	// ... lines 18 - 22
	$this->pantherBrowser()
	->visit('/')
	->click('Voyages')
	->waitForPageLoad()
	->click('New Voyage')
	->fillField('Purpose', 'Test voyage')
	->selectFieldOption('Planet', 'Earth')
	->click('Save')
	->assertElementCount('table tbody tr', 2)
	->assertSee('Bon voyage')
	;
	}
	}

	<!DOCTYPE html>
	<html>
	<head>
Show Lines	// ... lines 4 - 6
	{% if app.environment != 'test' %}
	<meta name="view-transition">
	{% endif %}
Show Lines	// ... lines 10 - 16
	</head>
Show Lines	// ... lines 18 - 97
	</html>

Show Lines	// ... lines 1 - 4
	use Facebook\WebDriver\WebDriverBy;
Show Lines	// ... lines 6 - 7
	class AppBrowser extends PantherBrowser
	{
Show Lines	// ... lines 10 - 17
	public function waitForDialog(): self
	{
	$this->client()->wait()->until(function() {
	return $this->crawler()->filter('dialog[open]')->count() > 0;
	});

	if ($this->crawler()->filter('dialog[open] turbo-frame')->count() > 0) {
	$this->waitForTurboFrameLoad();
	}

	return $this;
	}

	public function waitForTurboFrameLoad(): self
	{
	$this->client()->wait()->until(function() {
	return $this->crawler()->filter('turbo-frame[aria-busy="true"]')->count() === 0;
	});

	return $this;
	}
	}