Chapters

32 Chapters | 4:16:27 |

01

¡Hola ÚLTIMA PILA!

4:01
02

Mapeador de activos

5:18
03

Módulos JavaScript

6:33
04

paquetes JavaScript de terceros

5:05
05

CSS

6:22
06

Tailwind CSS

9:24
07

Stimulus (estímulo)

6:45
08

Paquetes Symfony UX

6:47
09

Turbo Drive

5:42
10

Marcos Turbo

8:43
11

¡Popover!

11:44
12

Formularios de envío automático

3:37
13

Paginación y ordenación por columnas

8:04
14

Tablas de datos con Turbo Frames

7:03
15

Ver Transiciones

7:04
16

Notificaciones Toast

3:46
17

Tostadas más elegantes: Auto-cierre y Desvanecimiento

7:34
18

Turbo Streams: Actualiza cualquier elemento

5:23
19

Diálogo HTML para Módulos

13:18
20

¡Modal AJAX!

8:29
21

Fantástica UX modal con un estado de carga

8:04
22

Cosas extravagantes en el Éxito del Formulario Modal

8:30
23

¡Más con Modales divertidos! Editar y borrar

10:05
24

Respuestas Turbo Streams

4:24
25

Componentes Twig

10:52
26

Componente Twig modal

11:54
27

Componentes en vivo

11:47
28

Validación en tiempo real y campos de formulario dependientes

11:37
29

Pruebas, Parte 1: Twig y Componentes Vivos

5:32
30

Pruebas Parte 2: Pruebas funcionales

12:36
31

Rendimiento

9:16
32

Bonus: Más sobre Flowbite

11:08

> Symfony 7 > 30 días con LAST Stack

Buy Access to Course

30.

Pruebas Parte 2: Pruebas funcionales

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!

Bienvenido de nuevo a la 2ª parte del día 29. Hoy me he saltado las normas y lo he convertido en un artículo doble. Hemos hablado de las pruebas de los componentes Twig y Live... pero también tenemos que hablar de las pruebas funcionales -o de extremo a extremo- en general. Es cuando controlamos mediante programación un navegador, hacemos que haga clic en enlaces, rellene formularios, etc.

Dos cosas sobre esto. Primero, vamos a crear un sistema que me gusta mucho. Y segundo, el camino para conseguirlo va a ser... sinceramente, un poco accidentado. No es un proceso suave y eso es algo en lo que debemos trabajar como comunidad.

zenstruck/navegador

Symfony tiene herramientas de pruebas funcionales integradas, pero a mí me gusta utilizar otra biblioteca. En tu terminal, instálala con:

composer require zenstruck/browser --dev

A continuación, en la carpeta tests/, crearé un nuevo directorio llamado Functional/... luego una nueva clase llamada VoyageControllerTest. Y supongo que también podría ponerla en un directorio Controller/.

Para las tripas, pegaré una prueba terminada:

            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')
        
                    ;
        
                }
        
            }

Vale, estamos utilizando ResetDatabase y Factories... extiende elWebTestCase normal para pruebas funcionales... y luego HasBrowser viene de la biblioteca Browser y nos da la capacidad de llamar a $this->browser() para controlar un navegador con esta API realmente suave. Esto sigue el flujo de ir a la página del viaje, hacer clic en "Nuevo viaje", rellenar el formulario, guardar y aseverar al final. La prueba comienza con un único Voyage en la base de datos, así que después de crear uno nuevo, aseveramos que hay dos en la página.

Para ejecutarlo, utiliza el mismo comando, pero apunta al directorio Functional/:

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

Y... ¡realmente pasa! ¡Genial!

Probar JavaScript con Panther

Pero espera un momento. Entre bastidores, esto no está utilizando un navegador real: sólo está haciendo peticiones falsas en PHP. Eso significa que no ejecuta JavaScript. Estamos probando la experiencia que tendría un usuario si tuviera desactivado JavaScript. Eso está bien para muchas situaciones. Sin embargo, esta vez quiero probar toda la fantasía modal.

Para ejecutar la prueba utilizando un navegador real que admita JavaScript -como Chrome- cambia a $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
                            
                    ;
        
                }
        
            }

Pruébalo:

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

¡Nada! Pero un bonito error: necesitamos instalar symfony/panther. ¡Hagámoslo!

composer require symfony/panther --dev

Panther es una biblioteca PHP que puede controlar mediante programación los navegadores reales de tu máquina. Para utilizarla, también necesitamos ampliar 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
                            
            }

Inténtalo de nuevo:

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

No vemos el navegador -se abre invisiblemente en segundo plano- ¡pero ahora está utilizando Chrome! Y la prueba falla - bastante pronto:

Elemento clicable "Nuevo Viaje" no encontrado.

Hmmm. Ha hecho clic en "Viajes", pero no ha encontrado el botón "Nuevo viaje". Una característica fantástica de zenstruck/browser con Panther es que, cuando falla una prueba, hace una captura de pantalla del fallo.

Dentro del directorio var/... aquí está. Huh, la captura de pantalla muestra que seguimos en la página de inicio, como si nunca hubiéramos hecho clic en "Viajes"... aunque puedes ver que el enlace "Viajes" parece activo.

El problema es que la navegación por la página se realiza mediante Ajax... y nuestras pruebas no saben esperar a que termine. Hace clic en "Viajes"... e inmediatamente intenta hacer clic en "Nuevo viaje". Esto será lo principal que tendremos que arreglar.

Cargando un servidor de desarrollo "de prueba

Pero antes de eso, ¡veo un problema mayor! Mira los datos: ¡no proceden de nuestra base de datos de prueba! Vienen de nuestro sitio de desarrollo

Aunque no podamos verlo, Panther está controlando un navegador real. Y... un navegador real necesita acceder a nuestro sitio utilizando un servidor web real a través de una dirección web real. Como estamos utilizando el servidor web Symfony, Panther lo detectó y... ¡lo utilizó!

Pero... ¡eso no es lo que queremos! ¿Por qué? Nuestro servidor utiliza el entorno dev y la base de datos dev. Nuestras pruebas deberían utilizar el entorno test y la base de datostest.

Para solucionarlo, abre phpunit.xml.dist. Pega dos variables de entorno:

            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>

La primera... es una especie de hack. Le dice a Panther que no utilice nuestro servidor. En su lugar, Panther iniciará ahora silenciosamente su propio servidor web utilizando el servidor web PHP incorporado. La segunda línea le dice a Panther que utilice el entorno test cuando haga eso.

En la prueba, para que sea aún más fácil ver si esto funciona, después de hacer clic en viajes, llama a 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
                            
                    ;
        
                }
        
            }

Haz una captura de pantalla, luego vuelca y muere.

Ejecuta:

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

Lo hace... ¡y guarda una captura de pantalla! ¡Genial! Búscalo en var/. Y... vale. Parece que se está utilizando el nuevo servidor web... ¡pero faltan todos los estilos!

Depurar abriendo el navegador

¡Es hora de hacer un poco de trabajo detectivesco! Para entender qué está pasando, podemos decirle temporalmente a Panther que abra realmente el navegador, por ejemplo, para que podamos verlo y jugar con él.

Después de visitar, digamos ->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
                            
                    ;
        
                }
        
            }

Luego, para abrir el navegador, anteponemos al comando de prueba PANTHER_NO_HEADLESS=1:

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

Y... ¡woh! Se abrió el navegador y luego se detuvo. Ahora podemos ver el código fuente de la página. Aquí está el archivo CSS. Ábrelo. Es un 404 no encontrado. ¿Por qué?

En el entorno de desarrollo, nuestros recursos se sirven a través de Symfony: no son archivos físicos reales. Si antepones a la URL index.php, funciona. Panther utiliza el servidor web PHP integrado... y necesita una regla de reescritura que le indique que envíe estas URL a través de Symfony. Sinceramente, es un detalle molesto, pero podemos arreglarlo.

De vuelta al terminal, pulsa intro para cerrar el navegador. En tests/, crea un nuevo archivo llamado router.php. Pega el código:

            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;

Este es un archivo "enrutador" que utilizará el servidor web incorporado. Para decirle a Panther que lo utilice, en phpunit.xml.dist, pegaré otra variable de entorno:PANTHER_WEB_SERVER_ROUTER ajustada a ../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>

¡Pruébalo!

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

Y ahora... ¡funciona! Pulsa intro para terminar. A continuación, elimina el pause().

Ejecuta de nuevo la prueba, pero sin la variable de entorno:

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

Esperando la carga de la página turbo

Genial: ha llegado a nuestra línea de captura de pantalla. Ábrela. Vale, volvemos al problema original: no espera a que se cargue la página después de que hagamos clic en el enlace.

Resolver esto... no es tan sencillo como debería. Di $browser =, ciérralo e inicia una nueva cadena con $browser debajo. Entre medias, pegaré dos líneas. Ésta es de nivel inferior, pero espera a que se añada el atributo aria-busy al elementohtml, cosa que hace Turbo cuando se está cargando. Luego espera a que desaparezca:

            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')
        
                    ;
        
                }
        
            }

Prueba ahora:

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

Luego... abre la captura de pantalla. ¡Woh! Ahora está esperando a que termine la llamada Ajax. Pero recuerda: también estamos utilizando transiciones de vista. La página se ha cargado... pero aún está en medio de la transición. Lo arreglaremos en un minuto.

Navegador personalizado y clase de prueba base

Pero antes, tenemos que limpiar esto: es demasiado trabajo. Lo que me gustaría es un nuevo método en el propio navegador, como waitForPageLoad(). ¡Y podemos hacerlo con una clase de navegador personalizada!

En el directorio tests/, crea una nueva clase llamada AppBrowser. Voy a pegar las tripas:

            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;
        
                }
        
            }

Esto extiende la clase normal PantherBrowser y añade un nuevo método que esas mismas dos líneas.

Cuando llamemos a $this->pantherBrowser(), ahora queremos que devuelva nuestroAppBrowser en lugar del PantherBrowser normal. Para ello, lo has adivinado, es una variable de entorno: PANTHER_BROWSER_CLASS ajustada a 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>

Para asegurarnos de que esto funciona, 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
                            
                }
        
            }

Ejecuta la prueba:

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

Y... ¡sí! ¡Obtenemos AppBrowser! Por desgracia, aunque el nuevo método funcionaría, no obtenemos autocompletado. Nuestro editor no tiene ni idea de que hemos intercambiado una subclase.

Para mejorar esto, hagamos una última cosa: en tests/, crea una nueva clase base de prueba: AppPantherTestCase. Pegaré el contenido:

            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);
        
                }
        
            }

Extiende la clase normal PantherTestCase... luego anula el método pantherBrowser(), llama al padre, pero cambia el tipo de retorno para que sea nuestro AppBrowser.

En VoyageControllerTest, cambia esto a extend AppPantherTestCase , y asegúrate de eliminar 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
                            
            }

Luego podemos ajustar las cosas: vuelve a conectar todos estos puntos... y utiliza el nuevo método: ->waitForPageLoad()... ¡con autocompletar! Elimina elddScreenshot():

            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')
        
                    ;
        
                }
        
            }

¡Y veamos dónde estamos!

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

¡Más lejos!

Campo del formulario "Propósito" no encontrado.

Así que hizo clic en Viajes, hizo clic en "Nuevo viaje"... pero no encontró el campo de formulario. Si miramos hacia abajo en la captura de pantalla del error, podemos ver por qué: ¡el contenido del modal todavía se está cargando! Puede que veas el formulario en la captura de pantalla -a veces la captura de pantalla se produce un momento después, por lo que el formulario es visible-, pero éste es el problema.

Desactivar las transiciones de vista

Ah, pero antes de arreglar esto, también quiero desactivar las transiciones de vista. Entemplates/base.html.twig, la forma más fácil de asegurarse de que las transiciones de vista no estropean nuestras pruebas es eliminarlas. Digamos que si app.environment != 'test, entonces renderiza esta etiqueta meta:

            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>

En fin, volvamos a nuestro fallo. Cuando hacemos clic para abrir el modal, lo que necesitamos es esperar a que se abra el modal -que en realidad es instantáneo-, pero también esperar a que termine de cargarse el <turbo-frame>que hay dentro.

Abre AppBrowser. Voy a pegar dos métodos más:

            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;
        
                }
        
            }

El primero - waitForDialog() - espera hasta que ve un diálogo en la página con un atributo open. Y, si ese dialog abierto tiene un <turbo-frame>, espera a que se cargue: espera hasta que no haya ningún marco aria-busy en la página.

En VoyageControllerTest, después de hacer clic en "Nuevo viaje", digamos ->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
                            
                    ;
        
                }
        
            }

Y ahora

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

¡Tan cerca!

table tbody tr esperaba 2 elementos en la página, pero sólo encontró 1.

¡Eso viene de aquí abajo! ¿Cuál es el problema esta vez? ¡Volvamos a la captura de pantalla de error! Ah: hemos rellenado el formulario, parece que incluso hemos pulsado Guardar... ¡pero estamos afirmando demasiado rápido!

Recuerda: esto se envía a un <turbo-frame>, así que tenemos que esperar a que ese marco termine de cargarse. Y tenemos una forma de hacerlo:->waitForTurboFrameLoad(). También añadiré una línea para afirmar que no podemos ver ningún diálogo abierto: para comprobar que el modal se cerró:

            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')
        
                    ;
        
                }
        
            }

Ejecuta la prueba una vez más:

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

Pasa. ¡Guau! Lo admito, ha sido trabajo, ¡demasiado trabajo! Pero me encanta el resultado final.

Mañana, en nuestro último día, hablaremos del rendimiento. Y a diferencia de hoy, las cosas se pondrán rápidamente en su sitio, te lo prometo.

15 Comments

Sort By

apphancer 2 years 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 2 years ago edited

Hey @apphancer ,

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

Cheers!

| Reply |

Olexandr 6 months ago

If you enable autocomplete=true for the planet field in the VoyageType form (It's works great with Live Components at the moment), your Panther test might not work, because for selecting planet field (selectFieldOption('Planet', 'Earth')), crawler detects html input field instead of select field, and throws an exception.

To fix this, set autocomplete=false for testing:

class VoyageType extends AbstractType
{
    public function __construct(private ParameterBagInterface $parameterBag) {}

    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder = new DynamicFormBuilder($builder);

        $builder
            ...
            ->add('planet', null, [
                ...
                'autocomplete' => $this->parameterBag->get('kernel.environment') !== 'test',
            ])

| Reply |

kbond SFCASTS Olexandr 6 months ago edited

Hey @Olexandr!

You're solution definitely works and sometimes, to stay sane when working with Panther, it's what you have to do. :)

I am curious: was it finding the autocomplete input or not finding the select? I believe Panther cannot find things that aren't visible so I would have expected an "element not found" exception (because autocomplete hides the select and replaces with an input).

--Kevin

| Reply |

Olexandr kbond 6 months ago edited

Hi @kbond!

Actually, an exception throws by crawler on autocomplete=true setting, looks like:

Impossible to get the element with XPath "(//html/.//* ...... = 'hidden')])[1]" as it is not a choice form field. A ChoiceFormField can only be created from an input tag with a type of checkbox or radio (given type is text).

Xdebug shows that crawler detects an input type field, which is not what selectFieldOption method expects. So the simplest way, is to disable autocomplete and to give crawler the expected type)

Exception thrown on: https://github.com/symfony/panther/blob/main/src/DomCrawler/Field/ChoiceFormField.php#L199
The state of variables in that moment:

$type = 'text';
$tagName = 'input';

autocomplete=false gives:

$type = '';
$tagName = 'select';

| Reply |

kbond SFCASTS Olexandr 6 months ago

Hmm, I see... Then yeah, sounds like your solution is the easiest, reasonable fix...

| Reply |

fbourigault 1 year 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 fbourigault 1 year 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 2 years 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 2 years 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 2 years ago edited

Hey @TomDeRoo

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

Cheers!

| Reply |

apphancer 2 years 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 2 years 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 2 years 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 2 years 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 Tailwind CSS 3 Flowbite 2 Stimulus 3 Turbo 7

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
    }
}

What JavaScript libraries does this tutorial use?

// importmap.php

return [
  'app' => [
    'path' => './assets/app.js',
    'entrypoint' => true,
  ],
  'js-confetti' => [
    'version' => '0.11.0',
  ],
  '@hotwired/stimulus' => [
    'version' => '3.2.2',
  ],
  '@symfony/stimulus-bundle' => [
    'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
  ],
  'tom-select' => [
    'version' => '2.3.1',
  ],
  'tom-select/dist/css/tom-select.default.css' => [
    'version' => '2.3.1',
    'type' => 'css',
  ],
  '@hotwired/turbo' => [
    'version' => '7.3.0',
  ],
  'stimulus-popover' => [
    'version' => '6.2.0',
  ],
  'debounce' => [
    'version' => '1.2.1',
  ],
  'turbo-view-transitions' => [
    'version' => '0.3.0',
  ],
  'stimulus-use' => [
    'version' => '0.52.1',
  ],
  'flowbite' => [
    'version' => '2.2.1',
  ],
  '@popperjs/core' => [
    'version' => '2.11.8',
  ],
  'flowbite-datepicker' => [
    'version' => '1.2.6',
  ],
];

Previous Chapter

Next Chapter

Pruebas Parte 2: Pruebas funcionales

Share this awesome video!

Keep on Learning!

zenstruck/navegador

Probar JavaScript con Panther

Cargando un servidor de desarrollo "de prueba

Depurar abriendo el navegador

Esperando la carga de la página turbo

Navegador personalizado y clase de prueba base

Desactivar las transiciones de vista

15 Comments

Delete comment?

What PHP libraries does this tutorial use?

What JavaScript 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;
	}
	}